HTML表格

http://www.htmldog.com/examples/
[b]基本的表格[/b]
th 表头单元格,即可作为列的头部,也可作为行的头部
[url]http://www.htmldog.com/examples/headercells.html[/url]
















Cats Dogs Lemurs
Tiger Grey Wolf Indri
Cheetah Cape hunting dog Sifaka


















Cats Tiger Cheetah
Dogs Grey Wolf Cape hunting dog
Lemurs Indri Sifaka


[b]合并单元格[/b]
[url]http://www.htmldog.com/examples/colspan.html[/url]










Carnivores Primates
Tiger Grey Wolf Indri

[url]http://www.htmldog.com/examples/rowspan.html[/url]














Carnivores Tiger Cheetah Caracal Wildcat
Grey Wolf Cape hunting dog Red fox Fennec


[b]表格标题 [/b]给表格装上一个牌匾
这个标签必须紧接着放在table其实标签之后,默认情况显示在表格上方,



Animal Group

可以通过css属性 caption-side ,来设置表格标题的位置,但是IE6不支持。属性值可以是top (默认) right bottom left

给行分组
通过thead tfoot tbody对象类给行分组,将表格分割为表头、表尾和表体。
当表格很长时,打印时表头和表尾会出现在每一页,像word的页眉页脚,IE不支持。。
出现顺序必须是thead > tfoot > tbody ,尽管tbody会显示在head和foot之间,可以有多个tbody对象

[b]指明目标列[/b]



















[b]表格亲和力方面的考虑[/b]
摘要
Caption
This That The other Lunch Lunch

将表头和单元格相联系

将单元格和表头相联系


[size=large]
[b]表格的外观[/b][/size]
[b]压缩边框[/b]
表格设定border后,会在他的最外面的四条边上起作用,而不是在td单元格上,要实现整体以及单元格的网格·边框效果,需要将border属性应用于单元格本身。
td{border:1px black solid}
这样每个td变成了一个单独定义框,而不是网格的一部分,因为浏览器使用“分离的边框模型”(separated borders model),会完全分隔开每个单元格,让他们之间存在空白
添加 table{border-collapse:collapse}
这样将触发“压缩的边框模型”(collapsing borders model),相邻的单元格共享一个边框,较粗的那个才可见。
整个表格的边框与单元格边框接触的地方也会发生压缩,这里IE和FF不一样。
IE
[img]http://dl.iteye.com/upload/attachment/308538/e6ce7343-828c-3c70-b4dc-f6296fbfce9c.jpg[/img]
Firefox
[img]http://dl.iteye.com/upload/attachment/308536/55c23b63-c7fc-37f5-98bd-6b5c138c860c.jpg[/img]







11
11



[b]
隐藏空单元格[/b]
table{border-collapse:separate;empty-cells:hide;}
IE中,始终隐藏空单元格,要想显示单元格,必须添加 
FF中,通过empty-cells:hidden|show 来控制,但是border-collapse:separate,不能是collapse

你可能感兴趣的:(HTML,CSS,HTML,IE,Firefox,CSS,浏览器)