HTML5表格
1.1普通表格
简单的表格由一个table元素，以及一个或者多个tr和td元素组成，其中tr定义行，td定义列。
<table>
    <tr><td>锄禾日当午</td></tr>
html表格元素    <tr><td>汗滴禾下土</td></tr>
</table>
1.2列标题
在数据表格中，每列应包含一个标题，在数据库中这个标题为字段，在HTML中被称为表头单元格。使用th元素定义表头单元格。
默认状态下，th内文本呈现为居中，粗体显示，而td内文本为左对齐的普通文本。
<table>
    <tr><th>单价</th><th>数量</th></tr>
    <tr><td>50</td><td>300</td></tr>
</table>
1.3表格标题
使用Caption元素可以定义表格标题。表格标题必须随table元素之后，且只能对每个表格定义一个标题。
<table>
    <caption>值日表</caption>
<tr><th>星期一</th><th>星期二</th></tr>
    <tr><td>张三</td><td>李四</td></tr>
</table>
1.4表格行分组
使用thead, tfoot和thody元素可以对表格进行分组。其中thead定义表头区域，tbody定义数据区域，tfoot定义表注区域，对表格进行分组。
<table>
    <caption>结构化表格标签</caption>
    <thead><tr><th>信号灯</th>说明</tr></thead>
    <tbody>
        <tr><td>红</td><td>禁止通行</td></tr>
<tr><td>绿</td><td>可以通行</td></tr>
<tr><td>黄</td><td>等待通行</td></tr>
</tbody>
<tfoot>信号灯是交通正常通行秩序的保障，需要每一个人遵守。</tfoot>
</table>
1.5表格列分组
使用col和colgroup元素可以对表格列进行分组。主要作用: 为表格一列或多列定义样式。
<style type=”text/css”>
.coll { width: 25%; color: red; font-size: 16px; }
.coll {width: 50%; color: blue; }
</style>
<table width = 100% border=2>
    <colgroup span=2 class = coll></colgroup>
    <colgroup class = col2></colgroup>
    <tr><td>慈母手中线</td><td>游子身上衣。</td><td>临行密密缝，</td></tr>
    <tr><td>意恐迟迟归。</td><td>谁言寸草生，</td><td>抱得三春晖。</td></tr>
</table>
2 表格标签包含大量属性, 其中大部分属性都可以使用CSS属性代替使用，也有几个属性无法使用。
2.1 分离单元格
使用cellpadding属性可以定义单元格边沿与其内容之间的空白，使用cellspacing属性，以定义单元格之间的空格。这两个属性的取值单位为像素或者百分比。
<table border="1" frame="void" cellpadding="6" cellspacing="16">
    <caption>
    rules属性取值说明
    </caption>
    <tr>
        <th>值</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>none</td>
        <td>没有线条。</td>
    </tr>
    <tr>
        <td>groups</td>
        <td>位于行组和列组之间的线条。</td>
    </tr>
    <tr>
        <td>rows</td>
        <td>位于行之间的线条。</td>
    </tr>
    <tr>
        <td>cols</td>
        <td>位于列之间的线条。</td>
    </tr>
    <tr>
        <td>all</td>
        <td>位于行和列之间的线条。</td>
    </tr>
</table>
</body>
2.2细线边框
使用<table>标签的border属性可以定义表格的边框粗细，取值单位为像素，当值为0时表示隐藏边框线。
<table border="1"  rules="all" width="100%">
    <caption>
    rules属性取值说明
    </caption>
    <tr>
        <th>值</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>none</td>
        <td>没有线条。</td>
    </tr>
    <tr>
        <td>groups</td>
        <td>位于行组和列组之间的线条。</td>
    </tr>
    <tr>
        <td>rows</td>
        <td>位于行之间的线条。</td>
    </tr>
    <tr>
        <td>cols</td>
        <td>位于列之间的线条。</td>
    </tr>
    <tr>
        <td>all</td>
        <td>位于行和列之间的线条。</td>
    </tr>
</table>
2.3 跨单元格显示
Colspan和rowspan属性分别用来定义单元格可跨行或跨列显示。如果取值为0，则表示浏览器横跨到列的最后一列或者行的最后一行。
<body>
<table border=1 width="100%">
    <tr>
        <th align=center colspan=5>课程表</th>
    </tr>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td align=center colspan=5>上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>物理</td>
        <td>数学</td>
        <td>语文</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>体育</td>
        <td>英语</td>
        <td>音乐</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>体育</td>
        <td>数学</td>
        <td>英语</td>
        <td>地理</td>
    </tr>
    <tr>
        <td>地理</td>
        <td>化学</td>
        <td>语文</td>
        <td>语文</td>
        <td>美术</td>
    </tr>
    <tr>
        <td align=center colspan=5>下午</td>
    </tr>
    <tr>
        <td>作文</td>
        <td>语文</td>
        <td>数学</td>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。