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] 下一页
更多