![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：你的代码没有放到代码块中
Collection
Collection
| 序号 | 标签 | 描述 | 备注 | |
|---|---|---|---|---|
| 1 | <table> |
定义表格, | 必选 | |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 必选 | |
| 3 | <tr> |
定义表格中的行, | 必选 | |
| 4 | <th> |
定义表格头部中的单元格,默认加粗居中 | 必选 | |
| 5 | <td> |
定义表格主体与底部的的单元格 | 必选 | |
| 6 | <caption> |
定义表格标题, | 可选 | |
| 7 | <thead> |
定义表格头格, 只需定义一次 | 可选 | |
| 8 | <tfoot> |
定义表格底, 只需定义一次 | 可选 | |
| 9 | <col> |
为一个/多个列设置属性,仅限 | 可选 | |
| 10 | <colgroup> |
将多个<col>元素分组管理 |
可选 |
| 序号 | 属性 | 适用元素 | 描述 |
|---|---|---|---|
| 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>