HTML网页编程之表格样式-html表格标签的用法-编程文章分享

今天我要分享的内容是以列为单位设置表格样式。在插入表格课程中，我已经讲解了HTML中没有单独的列标签，列是由对应的单元格组成的行形成的。虽然如此，但列这个概念仍然是存在的。

让我们来看一下今天的示例效果。这个网页上有一个3行3列的表格，其中3列分别是姓名、科目和分数，而3行分别是表头行、字体加粗的内容和两行。第一列和第二列的背景颜色是绿色，第三列的背景颜色是灰色。在一列中，每一个单元格的样式都是统一的。

接下来，让我们看看实现的代码。以列为单位设置表格样式，实际上是通过这两个标签来实现的，分别是colgroup和col。colgroup翻译过来就是“列”的意思，而colgroup则是“列主”的意思。

首先，让我们来看看colgroup标签。这个标签是一个无属性的围堵标签，它的作用只有一个，即声明这个标签内包含的是本表格列的样式。通过这个标签，我们可以向整个列应用样式，而不需要为每一个单元格或每一行设置样式。

这个标签必须在table标签内，如果有caption标签，则必须在thead标签之前使用。如果不明白各标签的先后顺序，可以看看上节课的内容。colgroup标签仅仅是声明，具体的样式是要使用col标签来实现的。col标签的数量应该与TDTH的标签数量一致，一一对应地设置。第1行的col标签对应第1列的样式，第2行的col标签对应第2列的样式，以此类推。

有些同学会问，老师，你这里的表格有三列，但是你只写了两个col标签，这时候就要讲到col标签在HTML5中的两个常用属性，一个是col属性，说明了这一行的col标签的样式可以跨几列。

例如，在这里将第一行的col标签的Span属性设置为2，这就意味着这个样式在当前位置跨了两列。换句话说，让第一列和第二列使用了同一个样式。

第二个属性是它的style标签。这个style标签的内容是CSS的一段代码，通过这个属性我们可以为列添加各种效果。严格来说，style并不是卡标签的一个专用属性，而是HTML的全局属性之一。所谓的全局属性就是只要是HTML标签都自带这一个属性。对于各位同学来说，这是一个新概念，你们只需要记住就可以了。通过使用colgroup标签和col标签的配合，我们不仅能够灵活快速地为表格添加样式，进行美化，还能大幅减少代码量，提高页面加载速度。

以上就是今天的分享，希望各位同学能够牢记在心，并在下一次练习中做到不看视频也能够写出代码。如果需要获取相关案例和文档，可以向我提问。我们下期再见。如果你对网页编程、服务端编程、数据库、算法等感兴趣，欢迎点赞、关注！

HTML网页编程之表格样式

相关推荐

请登录