细说表格 - 简书

细说表格

语法：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
表格一般都有一个标题，表格标题使用<caption>表格标题</caption>标签。表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题。
表格的表头<th>是<td>单元格的一种变体，它的本质还是一种单元格。它一般位于第一行，用来表明这一行或列的内容类别。表头有一种默认样式：浏览器会以粗体和居中的样式显示<th>元素中的内容。当然对于表头，我们可以用<td>标签代替<th>标签，但是不建议这样做。
为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。有了这三个标签，表格HTML代码语义更加良好，结构更加清晰。

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

th / td属性

colspan  跨列 合并列
rowspan  跨行 合并行
<td colspan="2"></td>
<td rowspan="2"></td>

说明：

<thead>、<tbody>和<tfoot>这三个标签也是表格中非常重要的标签，它在语义上区分了表头、表身、表脚。很多人容易忽略这三个标签。
很多人问，对于表格来说，thead、tbody、tfoot这3个标签加了跟没加时的显示效果都一样呀？但是加了之后让你的代码更具有逻辑性。还有一点就是：HTML语义结构极其重要，特别是针对搜索引擎。

表格边框合并border-collapse

border-collapse属性值              说明
separate            默认值，边框分开，不合并
collapse    边框合并，如果相邻，则共用一个边框

表格边框间距border-spacing

border-spacing:像素值;

border-spacing属性跟上节课学到的border-collapse属性一样，只需要在table元素设置就可以生效，没必要在th、td这些元素中设置，造成代码冗余。

最后编辑于：2018.01.15 21:38:45