关于表格的HTML和CSS知识

关于表格的结构这里就不予介绍。

表格的HTML属性及其作用（仅列出HTML5支持的属性）：

border:   该属性应用于table标签上，其决定表内部边框是否显示，属性值为1（其实属性值无所谓，只要声明了border属性就会显示内部边框，只是标准推荐为1）。当然在table、th、td上使用css样式‘border’也可决定表内部边框是否显示。

colspan和rowspan：  该属性应用于单元格上，决定跨列和跨行的数目，属性值是数字（当然是正整数）。在用这两个属性时，要记得一点，一个单元格占了多个单元格的空间，所以要在文档结构中删除掉被占的单元格，否则会表格视觉效果会产生意向不到的效果。

headers:  该属性应用于单元格上，关联表头和普通单元格，属性值是表头的id值。在视觉上无任何效果，在处理数据时可能有作用吧。（毕竟我很少用到这个属性）。

span：  该属性用于<col>和<colgroup>标签上，规定跨数（不会像colspan和rowspan改变表格的文档结构哟）。

此处额外介绍下<col>和<colgroup>标签：

 1.  <col> 标签用于为表格中的一列或多列设置属性值。<col> 标签只能在 <table> 元素或 <colgroup> 元素内部使用。

 2.  通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

 3.  在 HTML 中，<col> 标签没有结束标签。在 XHTML 中，<col> 标签必须被正确的关闭。

 4.  <colgroup> 标签用于表示 HTML 的表格列组，定义了表中的一组列表。

 5.  如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

表格中其他标签简略介绍：

caption标签：定义表的标题，<caption> 标签必须直接放置到 <table> 标签之后且只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。caption-side的取值为top或bottom，意为标题位于表格顶部还是底部。

tbody,thead,tfoot标签：都是对单元格整行分组，本质上并无太大区别。

tr:  对单元格进行行分组。

注：当然仍有很多关于表格的属性可用，只是H5不支持而已。比如，单元格边距（cellpadding）和单元格间距（cellspacing）等，不过这些属性都可用css样式代替，根据内容与样式分离的原则，所以不推荐使用其他的HTML属性。当然HTML的全局属性除外。

表格中css样式应用：

border： 只能在table、th、td上有视觉效果，在其他表格元素上可能没有效果，因为根据表层关系td,th会覆盖下层的元素。（表层关系在文章最会介绍）

border-collapse：设置表格边框模式（分离边框和合并边框）。简单点说就是单元格有无自己单独的边框。 属性值为collapse和separate，可继承，默认分离式边框。合并边框时，单元格边框会合并，但合并规则不简单此处不做介绍，可在《css权威指南》第三版的P360查阅。

border-spacing： 设置单元格间间隔，相当于HTML属性cellspacing的作用。该规则在table上声明。只有当border-collapse为separate时该css规则才生效。此属性值是一个或多个长度值。指定一个值时，四周间隔相同且等于该值，指定两个值时前值表示水平单元格间隔，后值表示垂直单元格间隔。

empty-cells： 属性值为show或hide。应用于td、th。规定当单元格中无任何内容时单元格该如何显示。

table-layout： 表格布局模式。固定布局（fixed）和自动布局（auto）。该内容比较多，详阅《css权威指南》第三版P365.

关于表格的一些比较重要的补充内容：

 1.  css对于表元素和表内部元素的界限很明显。内部表元素生成矩形框，这些框有content，padding，border但一定没有margin，当然除了caption，它有margin，但caption总宽度不能超过表宽度，否则margin在左右其中一边回变成auto。

 2.  css规范不建议对表内部元素进行定位。（只是建议，如果你一定要定位也是可以的，不过意想不到的问题可能烦劳您自己解决了）

 3.  表内部元素不一定都定义。比如table标签只包含td标签。考虑如下结构：

    <table>
<td></td>
<td></td>

    </table>

    css会将“遗漏”的标签作为匿名表对象插入：

  <table>
[anonymous table-row object begins]
<td></td>
<td></td>
[anonymous table-row object ends]

  </table>

这里的匿名表对象就相当于tr标签的作用一样，不过它并不是真的存在。

 4.  表中水平对其用text-align。要将表单元格内容垂直对其用vertical-algin,在表中只有top，bottom，middle，baseline起作 用，但是含义有所变化。

top:单元格内容顶部与其行顶端对齐。
bottom:单元格内容底部与其行底端对齐。
middle:单元格内容中部与其行中部对齐。

baseline：基线对齐，详阅《css权威指南》第三版P372.

最后介绍下表格中的表层：

css对表格定义了6个层，可以分别对应表的不同标签。

从上往下分别是：单元格，行，行组，列，列组，表。基本上说，对应表各标签的样式都在其各自的表层上绘制。所以会出现当给tr设置border时会出现无视觉效果的结果，因为tr被td或th遮盖住了。

自己的经验总结，有错误之处望指出。