广东福彩好彩一预测:HTML+CSS教程:表格Table元素网页制作技巧

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

广东36选7怎么中 www.t5a2.cn

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

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

一个非?;〉睦?/h3>

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

这是一个跨多轴的数据。想象下,通过你得手指划过某一行来了解某个人的相关信息?;蛘叽由现料吕锤惺苣掣鍪莸愕哪J胶捅浠?。

表头和表体

上面这个基础例子中我们没有做的一件事是没有语义地指出第一行是该表格的头部。我们本应该这么做。整个第一行的部分没有包含数据,它只是每个列的标题。因此,我们可以<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] 下一页
更多
  • 一图看懂丨拉林铁路藏木特大桥 2018-11-25
  • 这篇文章写得非常好,现在的人大多都是根据一些简单的事实来判断事情的对错,“一个很漂亮的开奥迪的女人”为了十八块钱与保安对峙 2018-09-24
  • 近九成券商股逆市上涨 防御+反弹攻守兼备 2018-09-18
  • 暑期兼职当心中介有“猫腻” 兼职市场亟须规范 2018-09-18
  • 推动重庆各项事业沿着习近平总书记指引的方向奋力前行——华龙网 2018-09-17
  • 唐僧玄奘的四种形象,哪一种形象更接近真实? 2018-09-10
  • 马航客机在乌坠毁现场尸体散落 俄救援人员现场救援 2018-09-06
  • 内蒙古全区安全生产情况新闻发布会召开 2018-09-06
  • 好战的北约应该负责打扫战场,包括难民安置、战后重建…… 2018-08-31
  • 【文艺时代】尹昉:星空下跳舞 2018-08-19
  • 南京“凶宅”别墅 拍出786万元高价 2018-08-15
  • 他凭一颗青菜登上《舌尖上的中国3》 蟹粉菜心里藏人生哲学 2018-08-08
  • 杭州电动车充电全城没有统一价 2018-08-08
  • 西南华南等地将有较强降水 东北华北有对流性天气 2018-08-03
  • 以青春之我肩负起国家民族的希望 2018-07-25
  • 528| 581| 756| 428| 147| 256| 25| 685| 417| 450|