表格标签——2018-01-30

一、表格标签的格式

以4行5列的表格为例：

<table>
        <tbody>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </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>
        </tbody>
    </table>

注意：此处省略了<thead>和<tfoot>标签。

二、cssReset：

/* 表格样式重置 */
th,td{
    padding: 0;
    border: 1px solid black;
}
table{
    border-collapse: collapse;
}

三、表格的特性以及注意事项：

1、不要给除了table，th，td以外的表格标签加样式（避免兼容性问题）；
2、单元格默认平分table的宽度；
3、th里面的内容默认加粗并且左右上下居中显示；
4、td里面的内容上下居中，左右居左显示；
5、table决定了整个表格的宽度，th，td的宽度换算成百分比充满table；
6、表格里面每一列必须有宽度；
7、表格同一竖列继承最大宽度；
8、表格同行继承最大高度；
9、表格既不是内嵌元素也不是块元素，它是display:table;的特性。

四、表格的合并单元格操作：

colspan=“2”，就是指合并同一列的两个单元格；
rowspan=“2”，就是指合并同一行的两个单元格；

注意：在合并单元格的时候要及时删除多余的单元格；

给单元格加宽度的时候：width=“100”即可。（写行间样式）