首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML报表

2012-11-23 
HTML表格http://www.htmldog.com/examples/基本的表格th 表头单元格,即可作为列的头部,也可作为行的头部ht

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



表格亲和力方面的考虑
摘要 <table summary="xxx table summary">
将表头和单元格相联系<th scope="col|row|rowgroup|colgroup">
将单元格和表头相联系<td headers="">


表格的外观
压缩边框
表格设定border后,会在他的最外面的四条边上起作用,而不是在td单元格上,要实现整体以及单元格的网格·边框效果,需要将border属性应用于单元格本身。
td{border:1px black solid}
这样每个td变成了一个单独定义框,而不是网格的一部分,因为浏览器使用“分离的边框模型”(separated borders model),会完全分隔开每个单元格,让他们之间存在空白
添加 table{border-collapse:collapse}
这样将触发“压缩的边框模型”(collapsing borders model),相邻的单元格共享一个边框,较粗的那个才可见。
整个表格的边框与单元格边框接触的地方也会发生压缩,这里IE和FF不一样。
IE

Firefox


<style type="text/css">table{border: 1px red solid; border-collapse:collapse;}td{border:10px black solid}</style><body><table><tr><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td></tr></table></body>



隐藏空单元格

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

热点排行