最近一直和表格打交道,发现各浏览器对表格边框的处理不尽相同,以致影响到最终的显示。这一问题主要是Firefox与非Firefox浏览器对表格边框处理上的差异。
可简单地用以下表达式表示(tableWidth为表格的视觉上的实际宽度,width为定义宽度):
FF:tableWidth = width+borderWidth/2
非FF浏览器:tableWidth = width;

测试l链接
FF中可能导致的问题
补充:尽管FF中表格在视觉上的宽度大于定义宽度,但其在文档中的实际宽度仍是最初的定义宽度,故其不会在文档中占用其定义大小外的空间。测试链接
基础的东西在这里,就不重复了~
<caption>
<catpiton>用于定义一个表格的标题,书写时候需紧随<table>标签之后。可通过样式属性:caption-side:left 设置标题在表格中所处的位置。但是目前仅非IE浏览器支持该样式属性,而IE浏览器中可通过标签的align属性完成(IE6,IE7仅支持top,bottom)。同时<caption>标签无法继承其上级table的某些样式属性(如backgroud,border等)。同时FF对caption的出来还表现出一些异常,如当对其上级<table>设置外边距时,<caption>并不会随上级<table>流动~查看演示
<colgroup>,<col>
<colgroup>用于对表格中的列进行分组。如:我们将表格中的第一列设置为红字白底。
查看演示我们可以看到不同浏览器对该标签的支持都不尽相同,safari对该标签的支持相当苛刻,需将该标签紧随<caption>/<table>书写。同时在非IE浏览器中该标签的书写位置不会影响到<thead>中单元格的显示属性,<thead>中的列亦可应用设置。而IE中只有位于<colgroup>之后的表格对象方可应用此标签设置,同时部分浏览器对通过该标签进行的样式设置无效,经测试,目前仅IE支持最好。查看演示
<col>为表格中一个或多个列定义属性值,只能在colgroup中使用此元素。如:将表格中的第一列设置为红字白底,第二,第三列设置为黑底白字。查看演示
<col>的span属性定义其影响的列数~
表格边框
表格的默认边框是很丑陋的,一个最为关键的问题是相邻单元格的重复边框,所以我们不得不动手对其进行美化。
方法一:取消默认的表格,单元格设置,将单元格间距设置为指定宽度,为表格设置背景色进而实现无重复边框。查看演示
方法二:更为简单有效的方法是通过设置border-collapes。查看演示
“div+css”极度盛行的今天,很多人已经忘了在HTML里还有table呃~,也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错,初衷就是用来显示数据的,错在很多人在那个年代把它用在了布局上,而且用滥了。
在table广泛用于布局的时代,或许很多人眼中table就是,其实不然,即使早在HTML4之前,至少就有了, 标签,HTML4开始引入<thead>,<tbody>,<tfoot>,<col>,<colgroup>标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了,如果表格单纯用于页面布局,这些标签或者属性基本是一无是处。但是当table回归它本来地位时,这一切变得重要。
<caption>:用于指定可选的表格外加标题,内容通常显示在表格上方或者下方以表明表格的内容,默认居中显示。
<th>:设置表格的标题,浏览器以不同的样式显示标题,一般将标题居中,并以黑体显示。
<thead>:其内容组成表格的标题,它可以包含<tr>,<th>
、 和<td> 。除了便于组织和应用样式外,为这些内容分组的优点在于这样可能在多个页面中重复某些元素,主要体现在打印表格中。
<tfoot>:与<thead>标签类似,其用于在表格中创建一个页脚,亦可在多页上出现。
<tbody>:指定表格正文,并可以出现多次(<thead> 、<tfoot>只可在表格中出现一次)。 熟悉各标签相应功能后,那么构建一个合理的用于呈现数据的表格,就变得很简单了。各尽其用,最大限度地表示出数据间的关系,这才是table真正用途之所在。那么我们可以构建如下完美数据表格。
wondger’s blog
| Category ID |
Category Name |
Description |
| 1 |
简单生活 |
我的简单生活 |
| 2 |
web相关 |
web应用,业界新闻 |
| 3 |
设计制作 |
web标准,web设计 |
查看代码效果
合理的数据表格呈现,远不止构建一个合理的代码结构,更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分,数据的显示方式,对齐原则等,设计者大可自由发挥。
BTW:啥是标准啊?我相信很多人回答不上来。尽管很多人都自称是css高手,div+css高手,在一个web标准的群里问,没人吭声,都是潜水王,都忘了这个世界除了70%的水,还有30%的空气。我也不知道啥是标准,绝大多数用户也不知道。但是我知道大谈标准化的今天,标准化并不是都是为了用户而标准化,相反更多地是在为计算机标准化。计算机笨,只认识代码,管他什么结构,表现,seo,大部分是为计算机做的。国外用人工搜索引擎工作时,不会去查看源代码。个人对标准化在HTML这部分的理解是,用最合理的标签和结构去呈现最适合的内容,纯属个人观点!意见相左者就当我在YY~···