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