利用CSS控制表格外观

在前面的两篇文章中，我介绍了如何利用HTML表格组织数据和如何利用CSS控制表格边界样式。本周，我将介绍这个系列的第三部分，表格边距问题和整个表格布局。

单元格模式

在文档树中，对所有元素都产生一个CSS矩形框，这称为CSS单元格模式。每个单元格有一个内容域，可选周边填充，边界，页边距。当你使用CSS和HTML元素时，需要始终记住单元格模式。

间距

使用HTML表格，你可以利用CSS的规则很容易地定义填充和页边距。关键问题是页边距仅应用于整个表格，而不是某行，列或者单元格。

在列表A中HTML代码利用CSS定义了一个表格的页边距和单元格间距。填充和页边距属性可以单独定义（左，右，上，下），也可以像在前面的例子一样，为一个元素的所有边定义一个页边距。

列表B定义单独值。同时，你还可以对整个表格使用宽度属性。这样你就可以很容易的定义整个表格大小。

对齐属性

和控制间距一样，你还可以控制每个单元格中数据的对齐属性。有两个对齐选项：垂直对齐和水平对齐。这和HTML TD元素的align和valign属性相对应。你可以使用CSS的文本对齐属性来水平对齐单元格数据和用垂直对齐属性控制垂直布局。下面的代码演示了这两个属性。

TD, TH { text-align: center; vertical-align: middle;}

垂直对齐属性有下面的可能取值：baseline, sub, super, top, text-top, middle, bottom, text-bottom, 和 length。你可以指定一个行高百分比的值。文本对齐属性可能取值为：左对齐，右对齐，中间对齐，最佳对齐。