表格元素
1. 简介
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
2.常用标签
| 序号 | 标签 | 描述 | 备注 |
|---|---|---|---|
| 1 | <table> |
定义表格, | 必选 |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 必选 |
| 3 | <tr> |
定义表格中的行, | 必选 |
| 4 | <th> |
定义表格头部中的单元格,默认加粗居中 | 必选 |
| 5 | <td> |
定义表格主体与底部的的单元格 | 必选 |
| 6 | <caption> |
定义表格标题, | 可选 |
| 7 | <thead> |
定义表格头格, 只需定义一次 | 可选 |
| 8 | <tfoot> |
定义表格底, 只需定义一次 | 可选 |
| 9 | <col> |
为一个/多个列设置属性,仅限 | 可选 |
| 10 | <colgroup> |
将多个<col>元素分组管理 |
可选 |
3.表格中的行与列的合并
跨行：
rowspan=""
跨列：
colspan=""
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>订单表</title></head><body><table border="1" width="600" height="200" cellspacing="0" cellpadding="5" align="center"><caption style="font-size: 1.5rem; margin-bottom: 10px">用户订单表</caption><thead><th colspan="2">用户信息</th><th colspan="3">订单信息</th><th colspan="4">地址信息</th></thead><tbody><tr><td>姓名</td><td>手机号</td><td>订单号</td><td>日期</td><td>金额</td><td>省</td><td>市</td><td>区</td><td>详细地址</td></tr><tr><td rowspan="4">张三</td><td>12345678910</td><td>202010101234</td><td>2020-10-10</td><td>635.00</td><td>广东省</td><td>深圳市</td><td>龙岗区</td><td>西瓜大道123号</td></tr><tr><td>12322318910</td><td>202010105987</td><td>2020-10-10</td><td>5135.00</td><td>广东省</td><td>韶关市</td><td>乐昌市</td><td>西瓜大道123号</td></tr><tr><td>12346952910</td><td>202010102256</td><td>2020-10-10</td><td>6352.00</td><td>广东省</td><td>广州市</td><td>海珠区</td><td>西瓜大道123号</td></tr><tr><td>12315423910</td><td>202010101542</td><td>2020-10-10</td><td>946.00</td><td>广东省</td><td>佛山市</td><td>龙岗区</td><td>西瓜大道123号</td></tr></tbody></table></body></html>