表格的主要作用与基本语法
表格主要用来显示、展示数据
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
<tr> <td>张三</td> <td>男</td> <td>19</td> </tr>
<tr> <td>理四</td> <td>男</td> <td>21</td> </tr>
</table>
- < table >< /table > 是用于定义表格的标签。
- < tr> < /tr> 标签用于定义表格中的行，必须嵌套在< table >< /table > 标签中。
- < td>< /td>标签用于定义表格中的单元格，必须嵌套在< tr> < /tr> 标签中。
- 字母td指表格数据，即数据单元格的内容。
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
< th>标签标示HTML表格的表头部分
<table>
<tr> <th>姓名</th> <th>性别</thd> <th>年龄</th> </tr>
<tr> <td>张三</td> <td>男</td> <td>19</td> </tr>
<tr> <td>理四</td> <td>男</td> <td>21</td> </tr>
</table>
表格属性
表格标签这部分属性我们实际开发不常用，后面通过css来设置
- 记住表格属性这些应用单词，后面css会使用
- 直观感觉表格的外观形态
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定表格单元格是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
这些属性要写到表格标签table 里面去
<table align="center" border="1" cellpadding="20" cellspacing="0" width="200" height="200">
<tr> <th>姓名</th> <th>性别</thd> <th>年龄</th> </tr>
<tr> <td>张三</td> <td>男</td> <td>19</td> </tr>
<tr> <td>理四</td> <td>男</td> <td>21</td> </tr>
</table>
表格标签
表格结构
为了更好的表示表格的语义，可以将表格分割为表格头部和表格主体两大部分。
在表格标签中，分别用：标签 表格的头部区域 、 标签 表格的主体区域。这样可以更好的分清表格结构。
<table align="center" border="1" cellpadding="20" cellspacing="0" width="200" height="200">
<thead>
<tr> <th>姓名</th> <th>性别</thd> <th>年龄</th> </tr>
</table>
<tbody>
<tr> <td>张三</td> <td>男</td> <td>19</td> </tr>
<tr> <td>理四</td> <td>男</td> <td>21</td> </tr>
</tbody>
</table>
合并单元格
特殊情况下，可以把多个单元格合并成一个单元格
- 合并单元格方式
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并： colspan="合并单元格的个数"
- 目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
- 合并单元格的步骤：（合并单元格的三步曲）
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式 = 合并的单元格数量。例如：< td colspan="2" > < /td>
- 删除多余的单元格
<table align="center" border="1" cellpadding="20" cellspacing="0" width="200" height="200">
<thead>
<tr> <th>姓名</th> <th colspan="2">性别</th> </tr>
</table>
<tbody>
<tr> <td rowspan="2">张三</td> <td>男</td> <td>19</td> </tr>
<tr> <td>女</td> <td>21</td> </tr>
<tr> <td>李四</td> <td>男</td> <td>21</td> </tr>
</tbody>
</table>
