webveuje/html/表格.md
2020-12-17 17:57:50 +08:00

55 lines
1.2 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 表格table
### 表格简介
html的table元素表示表格数据 ——即通过二维数据表表示的信息
### 简单的表格
```
<table> <!-- table 声明是一个表格 -->
<tr> <!-- tr 声明一行 -->
<td>第一行第一列格中的内容</td> <!--td 声明一列 -->
</tr>
</table>
```
效果如下:
![image-20201217144534429](表格.assets/image-20201217144534429.png)
### 表格table 的相关标签
| table | 声明是个表格 |
| ------- | ------------------ |
| tr | 声明一行 |
| td | 声明一列 |
| caption | 声明表格标题 |
| th | 声明表格表头单元格 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格结尾 |
> thead, tbody, tfoot 没有实际效果 只是响应 html5的语义化标签
### 表格 合并单元格
table 通过colspan 属性实现横向合并
通过rowspan 属性实现纵向合并
> colspan和rowspan 的属性值都是数字
>
> 如: colspan="3"
>
> rowspan="4"
效果如下:
![image-20201217150855004](表格.assets/image-20201217150855004.png)