精通HTML表格的使用

制作网页表格，需要使用table标签。

用好table标签并不容易，复杂的表格做起来就很麻烦，比如下面这张表。

我整理了一些HTML表格的高级语法。你可以看看，自己会用多少？

1. 标题和内容描述

表格的标题用caption标签表示，它会自动出现在整张表格的上方。

除了标题以外，对内容的更长描述可以写在table标签的summary属性中。

代码示例（为了便于阅读，tr、th、td省略关闭标签）：

在浏览器中的显示效果如下图：

2. 表头和表尾

从结构上看，表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示。

代码示例：

这里有三个注意点：

3. 列的分组

tbody可以用来对"行"进行分组，而colgroup则用来对"列"进行分组。

比如，下面的代码表示前40列为一组，每列的宽度为20像素。

span属性，可以指定colgroup标签能够影响到的列数。

在colgroup标签内部，可以使用col标签为这一列组中的每一列指定属性。

比如，下面的代码表示列组中每一列的段度为20像素：

再比如，如果40列中只有最后一列的样式不一样，那就这样写，方便在CSS中指定：

4. CSS中的table-layout语句

这个语句可以用来指定表格显示的样式，比如

它可以取三个值：

auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。

顺便说一句，为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

5. th和td

表示单元格的标签是th（table head）和td（table data），前者用来显示数据的名称，后者用来显示数据的内容。

代码示例：

这两个标签有一些很复杂的属性，分别是abbr、axis、char、headers和scope，详细解释参阅这里。

6. frame和rules

table标签的frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。

frame属性可取的值及含义如下：

rules 属性可取的值有五个，分别是：

代码示例：

在浏览器中的显示效果如下图：

[延伸阅读]

* HTML 4.0语言中的Table模型

* 理解表格一：图解frame 和rules 属性

* 理解表格二：其他表格相关标签及属性

原文链接：https://www.qiquanji.com/post/6627.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知