体会
除了熟记各种标签名称，在使用过程中，要灵活将下级标签的公共属性写在上级标签中，特别是格子中文字居中,颜色这种。
作业在线地址
元素
| 序号 | 标签 | 描述 | 备注 |
|---|---|---|---|
| 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 |
不限 | 设置高度 |
作业效果
源代码
<!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" cellpadding="8" cellspacing="0" width="500" heiht="300" align="center"><!-- colgroup管理列，也可以col分别设置列要对应标签填写,如果要使用接下来几格都同色，可使用span --><colgroup bgcolor="red"><col></col><col bgcolor="yellow"></col><col bgcolor="green" span='2'></col></colgroup><!-- 设置表格标题 --><caption style="font-size: 1.5rem;margin-bottom: 10px;" align="center">笑傲江湖</caption><!-- 设置页眉 --><thead bgcolor='white'><tr><th>武功秘籍</th><th>修炼者</th><th>性别</th><th>年龄</th></tr></thead><!-- 对首列相同秘籍进行单元格合并，同样使用span,合并之后，下面的被合并列中的对应块需要去掉 --><tbody align="center"><tr><td rowspan="2">独孤九剑</td><td>风清扬</td><td>男</td><td>98</td></tr><tr><!-- <td align="center">独孤九剑</td> --><td>令狐冲</td><td>男</td><td>23</td></tr></tbody><tbody align="center"><tr><td rowspan="2">僻邪剑谱</td><td>林平之</td><td>男</td><td>20</td></tr><tr><!-- <td align="center">僻邪剑谱</td> --><td>岳不群</td><td>男</td><td>43</td></tr></tbody><tbody align="center"><tr><td>葵花宝典</td><td>东方不败</td><td>女</td><td>32</td></tr></tbody><!-- 设置页脚，同时练习合并行--><footer><tr bgcolor='pink' align="center"><td>备注</td><td colspan="3">独孤九剑又帅又能打，天下第一</td></tr></footer></table></body></html>