table曾经在网页开发中占据着举重若轻的地位——布局,即使到了Web2.0我们依旧可以看到其布局的身影。然而技术是不断进步的Div+Css组合方式终究敲开了老式布局的大门刮起了新的一轮布局浪潮。之后而来的就是新仇旧恨,许许多多无论是对table有意见亦或没意见的人也开始了对table笔诛口伐——臃肿的代码、无语义标签、繁杂的书写方式等等。记住,table被创造之初并非是用于布局,而是显示数据。舍弃table布局,并非舍弃table本身。 下面是一个比较标准的table代码写法: <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <th>16css</th> <th>16css</th> </tr> <tr> <td>16css</td> <td>16css</td> </tr> </table>
简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行,th元素定义表头的单元格,td元素定义表格单元格。border属性规定表格边框的宽度,cellpadding规定单元边沿与其内容之间的空白,cellspacing规定单元格之间的空白,这三个属性我们一般手动设置为0避免浏览器差异。width属性规定表格的宽度,因为table宽度是随内部元素的宽度撑起多少而变化,而常用情况下我们希望table是同外部容器等宽,所以常常默认设置100%宽度使之撑满容器。
fixed布局模型的工作步骤: 这种方法的速度很快,因为所有列宽都由表的第一行定义。首行后所有行中的单元格都根据首行所定义的列宽确定大小。后面这些行中的单元格不会改变列宽。这意味着为这些单元格指定的width值都会被忽略。
一般在做复杂表格html的时候,有时候你会发现,无论怎么调整第一行每列的width,列宽还是会发生出乎于你意料之外的变动(例如一长串英文文本,并且中间无空格分隔的情况你要这列限定宽度,使得过长文字强制换行且不撑破表格,而往往结果是怎么也调整不到合适的宽度),这个时候在万般无奈之下,你可以使用table-layout:fixed。 用table显示数据有时候会有一个头疼的地方,即不换行显示某段文字,尤其在表头th中用到地方最多。其实你所头疼的并非换行,而是其背后的浏览器兼容加性使得换行的困难程度大大增。
总体来说在table中换行个人比较推荐的方式为:先为table设定table-layout:fixed,基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题,那么在此td中内部加一层div,再利用word-wrap:break-word; word-break:break-all;这俩个CSS方法可以解决换行的问题。
thead标签表示HTML表头
thead标签表示HTML页脚 tbody标签表示HTML表体 浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。 注释:如果您使用 thead、tfoot以及tbody元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前就可呈现表头和页脚了。您必须在table元素内部使用这些标签,且thead内部必须拥有tr标签。所以书写更为标准的table方式即如下代码: <table border="0" cellspacing="0" cellpadding="0" width="100%"> <thead> <tr> <th>16css</th> <th>16css</th> </tr> </thead> <tfoot> <tr> <th>16css</th> <th>16css</th> </tr> </tfoot> <tbody> <tr> <td>16css</td> <td>16css</td> </tr> </tbody> </table>
个人认为这个东西挺鸡肋,取之无用,弃之可惜。小项目可以增加些语义化,但因为曾经遇到过有多个不同表头在同一表格显示的窘境,限制了日后的开发,所以正式项目从可扩展的角度来说情慎用这些标签。 colgroup标签用于对表格中的列进行组合,以便对其进行格式化。
它们的作用主要就是来控制单元格的宽度了,这样省去单独定义每个单元格的麻烦,过去我们往往是在第一行中的th或者td上定义宽度来规定每列的宽度,而col不但可以定义宽度还能同时定义其他的属性,例如可以通过col来控制几列宽度的总和,还可以控制这列的背景色。但理想是丰满的,现实是骨干的,正如前面所说,功能越大不代表其兼容性也越强,据现有的测试下来,col和colgroup能发挥作用还能保证兼容的应用就只有俩:width和background。对于width,个人宁愿使用常规方式,第一行设置宽度,保证列宽。对于bacground,一般实际中表格大面积使用不同背景的情况也很少见。故个人认为:能不用尽量不用。 以上是对常见的table知识点进行了一次梳理,对常用到得几个地方进行了分析整理。期待看到这篇文章的你能够以正确的态度看待table,使用table。希望本文可以稍稍的挽救你吧,我的table。谢谢。 |