55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
# 表格(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)
|
||
|
||
|