[华为云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"等查看效果，因为我不能完全解释这种现象，所以这里就不介绍了。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）