HTML表格

我们今天所学的表格是日常生活中很常用的组织数据方法，在word中创建一个表格时，只需要指定表格的行数和列数即可。

在页面中做个表格就相对的复杂一点，需要我们定义表格的各项属性。

<table>

表单的组成部分：标题、表头、主体、表尾

<table>定义一个表格

<caption>定义表格的标题

<thead>定义表头部分

<tbody>定义表格主体（数据）部分

<tfoot>定义表尾，一般显示汇总信息等

<tr>定义一行

<th><td>定义一个数据项（单元格），<th>一般用于表头，有加粗样式，<td>一般用于表格主体部分，没有加粗样式

<td>的rowspan和colspan分别定义单元格跨行的行数、跨列的列数

布局：是一个页面的整体结构。

结构特点：从上往下，从左往右。一般每一行高度是一致的。

<table width="100%">
    <tr>
        <td colspan="3" style="height:120px;background-color: yellow"></td>
    </tr>
    <tr>
        <td style="width:150px; height: 300px;background-color:aqua"></td>
        <td style="width: 700px;background-color: blue"></td>
        <td style="width: 300px;background-color: blueviolet"></td>
    </tr>
    <tr>
        <td colspan="3" style="height:100px;background-color: black"></td>
    </tr>
</table>

页面布局可以通过table来实现，一个单元格就是一个布局区域单位。

该区域的大小可以通过height和width属性来设置，位置时通过 单元格的相对位置来体现的。

同时可以结合rowspan和colspan两个属性来完成单元格的合并。

当布局较复杂的时，可以使用table的嵌套来实现，即在某个单元格中在嵌入一个table来划分。