HTML表格

最新推荐文章于 2023-01-30 17:48:50 发布

iteye_16906

最新推荐文章于 2023-01-30 17:48:50 发布

阅读量156

点赞数

分类专栏： HTML CSS 文章标签： HTML IE Firefox CSS 浏览器

本文链接：https://blog.csdn.net/iteye_16906/article/details/81927442

版权

HTML CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<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>

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

<table>
  <tr>
    <th colspan="2">Carnivores</th>
    <th>Primates</th>
  </tr>
  <tr>
    <td>Tiger</td>
    <td>Grey Wolf</td>
    <td>Indri</td>
  </tr>
</table>

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

<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>

[b]表格标题 [/b]给表格装上一个牌匾
这个标签必须紧接着放在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对象

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

<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>

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

[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]

<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>

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

iteye_16906

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

http://www.htmldog.com/examples/[b]基本的表格[/b]th 表头单元格，即可作为列的头部，也可作为行的头部[url]http://www.htmldog.com/examples/headercells.html[/url][code="html"] Cats Dogs Lemurs ...
复制链接

扫一扫