[华为云WEB前端全栈成长计划]四、表格标签
我们经常能在网络上，看到这种信息的显示方式：(图是某ip代理网站的截图)
可以看到，这就是一种标准的表格展示方法。所以第四章我们学习以下表格标签。
先来看看以下几张图，对表格相关标签做个了解。
我们来看一下代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Table</title> </head> <body> <table> <caption>这是一个表格</caption> <tr> <th>名称</th> <th>价格</th> <th>品牌</th> </tr> <tr> <td>鼠标</td> <td>10</td> <td>未定义</td> </tr> </table> <hr /> <table> <thead> <tr> <td>名称</td> <td>价格</td> <td>品牌</td> </tr> </thead> <tbody> <tr> <td>鼠标</td> <td>10</td> <td>未定义</td> </tr> </tbody> <tfoot> <tr> <td>结尾</td> </tr> </tfoot> </table> <hr /> <table border="2px" width="300" height="200"> <colgroup > <col bgcolor = "red" /> <col bgcolor = "blue" /> <col bgcolor = "yellow" /> </colgroup> <thead> <tr> <th>名称</td> <th>价格</td> <th>品牌</td> </tr> </thead> <tbody> <tr> <td>鼠标</td> <td>10</td> <td>未定义</td> </tr> </tbody> <tfoot> <tr> <td>结尾</td> </tr> </tfoot> </table> <hr /> <table border="2px" width="300" height="200"> <colgroup > <col bgcolor = "red" /> <col bgcolor = "blue" /> <col bgcolor = "yellow" /> </colgroup> <thead> <tr> <th>名称</td> <th>价格</td> <th>品牌</td> </tr> </thead> <tbody> <tr> <td>鼠标1</td> <td>10</td> <td rowspan="2">未定义</td> </tr> <tr> <td>鼠标2</td> <td>20</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">结尾</td> </tr> </tfoot> </table> </body> </html>
实际效果如下：
我们可以看到caption标签用来定义表格的名称，然后是tr标签，这个标签是表示表格中的一行，我们可以在tr标签里定义th和td，这里我们先说以下，一个th和td就相当于一个小格子，我们就是要用td(格子)标签填充在tr(行)中，th标签一般用于表头信息，我们将要统计/展示的属性放在表头，如途中的名称、价格、品牌，而具体的数据用td来显示，th标签会默认有加粗效果。
第二个表格我们使用了thead、tbody、tfoot标签，其实这些标签就是为了让我们的代码更规范，清楚的标识出相应的信息。
我们来看第三个和第四个表格。
结合源代码我们发现，其中在table标签上多了border、height、width，分别表示的边界（翻译过来）、高度、宽度。
我们设置了之后就会看到每个单元格产生了边框，而height和width在这里是作用在定义表格大小上的属性。而px代表的是像素。
另外我们使用了colgroup标签来管理col也就是说用列组来管理对列的操作，这里我们使用bgcolor属性设置了每一列的背景颜色。
最后看看第四个表格，我们发现未定义作用在了两个行之间，而结尾直接横跨三列，这里使用了colspan和rowspan属性，我们在td标签使用rowspan="2"表示这个标签将合并2行，使用colspan="3"表示将合并3列。具体都是作用于当前行和下一行，当前列于后两列。
最后大家可以将rowspan和colspan作用在不同的行和列，设置不同的值，会发现不同的效果，比如在鼠标2设置rowspan="2"等查看效果，因为我不能完全解释这种现象，所以这里就不介绍了。
- 点赞
- 收藏
- 关注作者
评论（0）