表格元素
1. 简介
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
2 常用标签
| 序号 | 标签 | 描述 | 备注 | |
|---|---|---|---|---|
| 1 | <table> |
定义表格, | 必选 | |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 必选 | |
| 3 | <tr> |
定义表格中的行, | 必选 | |
| 4 | <th> |
定义表格头部中的单元格,默认加粗居中 | 必选 | |
| 5 | <td> |
定义表格主体与底部的的单元格 | 必选 | |
| 6 | <caption> |
定义表格标题, | 可选 | |
| 7 | <thead> |
定义表格头格, 只需定义一次 | 可选 | |
| 8 | <tfoot> |
定义表格底, 只需定义一次 | 可选 | |
| 9 | <col> |
为一个/多个列设置属性,仅限 | 可选 | |
| 10 | <colgroup> |
将多个<col>元素分组管理 |
可选 |
2 常用属性
| 序号 | 属性 | 适用元素 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 3 | cellspacing |
<table> |
设置单元格边框间隙 |
| 4 | align |
不限 | 设置单元格内容水平居中 |
| 5 | bgcolor |
不限 | 设置背景色 |
| 6 | width |
不限 | 设置宽度 |
| 7 | height |
不限 | 设置高度 |
表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格元素2-允许行与列的合并</title>
</head>
<body>
<table border="1" width="800" cellspacing="0" cellpadding="5" height="200" align="center">
<caption style="font-size: 1.5rem; margin-bottom: 10px">
产品交接单
</caption>
<!-- 整个表格15行七列 -->
<colgroup>
<!-- col标签能使用的属性及其有限，因只使用span属性，其他全部用css控制 -->
<!-- 第一列样式，使用style属性设置列样式 -->
<col style="background-color: rgb(161, 230, 250);" />
<!-- 第二列样式使用style设置属性设置样式 -->
<col style="background-color: rgb(172, 245, 172);" />
<!-- 从第三列开始合并并操作，直到最后一列使用style属性设置列样式 -->
<col span="5" style="background-color: lightyellow" />
</colgroup>
<thead>
<tr>
<!-- 无论是行合并还是列合并，colspan，rowspan。都必须写到单元格中 -->
<!-- 表格页眉 -->
<!-- 考虑孩子的特点，中文字体之间要有点间隙，以便阅读，暂时只能用css实现 -->
<thead bgcolor="#ffe" style="letter-spacing: 5px;">
<!-- <th colspan="2"></th> -->
<!-- <th>x</th> -->
<th rowspan="2">产品名称</th>
<th rowspan="2">规格型号</th>
<th rowspan="2">完工状态</th>
<!-- <th>x</th> -->
<th colspan="3">交接数量</th>
<!-- <th>x</th> -->
<th rowspan="2">件/公斤</th>
</tr>
<!-- 行与列的合并必须写在td标签中 -->
<!-- <td>x</td> -->
<!-- <td>x</td> -->
<!-- <td>x</td> -->
<td>合格（件）</td>
<td>不合格（件）</td>
<td>公斤</td>
<!-- <td>x</td> -->
</tr>
</thead>
<!-- 这是主体 -->
<tbody align="center" style="letter-spacing: 5px;">
<tr>
<td>花生</td>
<td>001</td>
<td>/</td>
<td>9</td>
<td>1</td>
<td>50</td>
<td>5</td>
</tr>
<tr>
<td>瓜子</td>
<td>002</td>
<td>/</td>
<td>10</td>
<td>/</td>
<td>40</td>
<td>4</td>
</tr>
<tr>
<td>茶叶</td>
<td>003</td>
<td>/</td>
<td>18</td>
<td>2</td>
<td>100</td>
<td>5</td>
</tr>
<tr>
<td>香蕉</td>
<td>004</td>
<td>/</td>
<td>5</td>
<td>/</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>葡萄</td>
<td>005</td>
<td>/</td>
<td>4</td>
<td>1</td>
<td>50</td>
<td>10</td>
</tr>
<tr>
<td>大米</td>
<td>006</td>
<td>/</td>
<td>20</td>
<td>/</td>
<td>200</td>
<td>10</td>
</tr>
<tr>
<!-- 考虑到这里，被第一列自定义样式控制，这里单独设置，已覆盖原来的样式 -->
<td colspan="7" bgcolor="#fef">交接情况</td>
</tr>
<tr>
<td>交货部门</td>
<td>xxx食品有限公司</td>
<td>班次</td>
<td>A</td>
<td>交货人</td>
<td colspan="2">张xx</td>
<!-- <td>x</td> -->
</tr>
<tr>
<td>收货部门</td>
<td>生活超市</td>
<td>班次</td>
<td>A</td>
<td>收货人</td>
<td colspan="2">李xx</td>
<!-- <td>x</td> -->
</tr>
<tr>
<td colspan="7">检验员：</td>
</tr>
</tbody>
</table>
<p style="width:650px; margin: auto; margin-top:10px; text-align:right">
<time>2020 年 10 月 3 号</time>
</p>
</body>
</html>