HTML+CSS教程:表格Table元素网页制作技巧

2013-09-26 21:55:58  来源:网页教学网 

网页制作Webjx文章简介:table元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。

<table>元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。其本质上由这两个东西组成:行和列。在这篇文章中我们会探索应该如何使用它们,什么时候使用,和其他所有你需要知道的东西。

一个非常基础的例子

下面是一个非常简单的表格数据例子:

这是一个跨多轴的数据。想象下,通过你得手指划过某一行来了解某个人的相关信息。或者从上至下来感受某个数据点的模式和变化。

表头和表体

上面这个基础例子中我们没有做的一件事是没有语义地指出第一行是该表格的头部。我们本应该这么做。整个第一行的部分没有包含数据,它只是每个列的标题。因此,我们可以<thead>元素来完成这件事情,它会包裹第一个<tr>元素(它会包裹所有的行所需要的头部信息)

HTML代码如下所示:

当你使用了<thead>元素后,<table>元素中不能有直接的<tr>子元素,所有的行必须存在于<thead><tbody><tfoot>里面。要注意的是我们会把所有的数据行包含在<tbody>里面。

表尾

连同<thead><tbody>一起的还有<tfoot>,用于包裹指出表格页脚的行。和<thead>一样,它只是语义地指出了辅助信息,没包含别的数据。

<tfoot>独一无二的一点是它在HTML中的位置,它紧跟着<thead>并位于<tbody>的前面!你可能会认为它是table标签结束前的最后一个元素,但情况并不是这样。因为页脚可能包含了用于理解表格的必要信息,因为在资源序列中它应当排在在数据的前面。

尽管首先在资源序列中出现,<tfoot>确实渲染在了表格的底部,这使其成为一个不同寻常的HTML元素。

举个例子,它可以用于这样的场景,在一个很长或很高的表格中,<tfoot>重复了表头的信息,使得读者更容易地在底部看到列表的标题信息,而不用回到头部查看。但你并没有必要这样来使用它。

在一些元素位置根据需要从上至下跳动的布局中,<tfoot>是个不错的技巧。举个例子,虽然一个导航在屏幕的底部,但在HTML源码中导航应该在顶部。

单元格:td和th

在表格中一个独立的单元格总是<td><th>两者之一,只要你愿意,你可以把任何东西放进表格的单元格中,但要使这些元素成为表格中的单元格元素。<th>是“表格的标题”,<td>是“表格的数据”。

使用我们现有的简单例子,顶行是所有的头部信息。它们是数据的标题而不是数据,而剩下的所有行都为数据。如下:

<th>元素并不是必须放在<thead>元素当中。它们简单地指出了头部信息。因此它们也能用于<tbody>元素的第一行当中。我们会在后面给出这样的一个例子。

共7页: 上一页 1 [2] [3] [4] [5] [6] [7] 下一页
更多