HTML报表
日期：2014-05-17 浏览次数：20646 次
HTML表格
http://www.htmldog.com/examples/
基本的表格
th 表头单元格，即可作为列的头部，也可作为行的头部
http://www.htmldog.com/examples/headercells.html
合并单元格
http://www.htmldog.com/examples/colspan.html
http://www.htmldog.com/examples/rowspan.html
表格标题 给表格装上一个牌匾
这个标签必须紧接着放在table其实标签之后，默认情况显示在表格上方，
可以通过css属性 caption-side ，来设置表格标题的位置，但是IE6不支持。属性值可以是top (默认) right bottom left
给行分组
通过thead tfoot tbody对象类给行分组，将表格分割为表头、表尾和表体。
当表格很长时，打印时表头和表尾会出现在每一页，像word的页眉页脚，IE不支持。。
出现顺序必须是thead > tfoot > tbody ，尽管tbody会显示在head和foot之间，可以有多个tbody对象
指明目标列
表格亲和力方面的考虑
摘要 <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
http://www.htmldog.com/examples/
基本的表格
th 表头单元格，即可作为列的头部，也可作为行的头部
http://www.htmldog.com/examples/headercells.html
<table>
<tr>
<th>Cats</th>
<th>Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
</table>
<table>
<tr>
<th>Cats</th>
<td>Tiger</td>
<td>Cheetah</td>
</tr>
<tr>
<th>Dogs</th>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
</tr>
<tr>
<th>Lemurs</th>
<td>Indri</td>
<td>Sifaka</td>
</tr>
</table>合并单元格
http://www.htmldog.com/examples/colspan.html
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
</table>http://www.htmldog.com/examples/rowspan.html
<table>
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
</table>表格标题 给表格装上一个牌匾
这个标签必须紧接着放在table其实标签之后，默认情况显示在表格上方，
<table> <caption>Animal Group</caption> <!-- etc --> </table>
可以通过css属性 caption-side ，来设置表格标题的位置，但是IE6不支持。属性值可以是top (默认) right bottom left
给行分组
通过thead tfoot tbody对象类给行分组，将表格分割为表头、表尾和表体。
当表格很长时，打印时表头和表尾会出现在每一页，像word的页眉页脚，IE不支持。。
出现顺序必须是thead > tfoot > tbody ，尽管tbody会显示在head和foot之间，可以有多个tbody对象
指明目标列
<table>
<caption>Caption</caption>
<!-- 给前两列加上 alternative -->
<colgroup span="2" class="alternative"></colgroup>
<!-- 给第二列和第四列，加上 alternative -->
<colgroup>
<col />
<col class="alternative" />
<col />
<col class="alternative" />
</colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>表格亲和力方面的考虑
摘要 <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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
