# 表格(table)
表格:由行和列组成的结构化数据集(表格数据)
### 使用场景
html表格应用于展示表格数据,而不是用来实现网页布局
用表格实现网页布局出现的问题:
1. 表格布局减少了视觉受损的用户的可访问性
2. 表格会产生更多的标签,使代码变得更难于编写,维护,调试
3. 表格不能自动响应 正确的布局容器(如div ) 他们的默认宽度是父元素的100% 但表格的默认大小是根据其内容而定的。因此 如果要做移动端适配,就需要采取额外的措施来改变表格的样式
### 新建一个表格
1. 每个表格的内容都被包含在
中 而且这些内容需要写在html结构的body部分
2. 在表格中,最小的内容容器是单元格,是通过(td)创建的 这是一列
3. 如果想换行,需要把位于同一行的内容包含在 一个tr 标签中 即用
定义一行
示例:
```
Document
姓名 |
年龄 |
性别 |
班级 |
asd |
14 |
男 |
1 |
lily |
12 |
女 |
1 |
asd |
14 |
男 |
1 |
lily |
12 |
女 |
1 |
```
效果如下:
![image-20210105170312759](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210105170312759.png)
上面的代码中出现的 中的border 用于给表格加上边框
#### 表格表头(th)
table包裹的 th标签会有加粗的效果 看起来是表格的表头
把上面表格的顶部四个单元格做成表头效果:
```
Document
姓名 |
年龄 |
性别 |
班级 |
asd |
14 |
男 |
1 |
lily |
12 |
女 |
1 |
asd |
14 |
男 |
1 |
lily |
12 |
女 |
1 |
```
![image-20210105172500056](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210105172500056.png)
### 允许单元格跨行或列