高度

在网页设计时，确定表的宽度要花这么大功夫，现在你可能想知道计算高度又会多复杂。实标上，在CSS 中，高度计算相当简单，不过浏览器开发人员可能不这么认为。

最容易的一种情况是，直接由height属性显式设置高度。在这种情况下，表的高度就由height值确定。这说明表可能比行高总和高或矮，不过2006年4月11日发布的CSS 2.1规范草案指出，将height看作是表框的最小高度。对于这些情况，CSS2.1规范明确地拒绝定义会发生什么，而只是指出CSS的将来版本可能解决这个问埋。用户代理可以扩展或收缩表中的表行来适应表的高度，也可以在表框中留白或者采取其他完全不同的做法。这完全由各个用户代理决定。

如果表的高度是auto，其高度则是表中所有行的行高再加上所有边框和单元格间隔的总和。要确定各行的高度，用户代理需要完成一个与确定列宽类似的过程。它要计算各单元格内容的最小和最大高度，然后使用这些最小和最大高度得出行的最小和最大高度。确定了所有行的最小和最大高度后，用户代理再得出各行的高度应当是多少，把这些行加在一起，然后使用这个计算确定表的高度。这与行内布局很类似，只不过对于结果不那么确定。

除了处理有明确高度的表以及表中的行高，还可以增加以下内容，这是CSS2.1中没有定义的：

表单元格高度为百分数时的效果

表行和行组高度为百分数时的效果

跨行单元格如何影响所跨行的高度（除了这些行必须包含该跨行单元格）

可以看到，表的高度计算在很大程度上留给用户代理来决定，历史证明，各用户代理很可能有不同的做法，所以你要尽可能避免设置高度。

对齐

有意思的是，相对于单元格和行的高度，定义单元格中内容的对齐要容易得多。甚至垂直对齐也很容易定义（垂直对齐很容易影响行高）。

水平对齐是最简单的。要让一个单元格中的内容对齐，可以使用text-align属性。实际上，单元格会处理为一个块级框，其中的所有内容都根据text-align值对齐（有关text-align的详细内容见第6章）。

要将一个表单元格中的内容垂直对齐，可以使用vertical-align属性。它使用的很多值与垂直对齐行内内容是一样的，不过应用到表单元格时这些值的含义有所变化。下面对三种最简单的情况做个总结：

top

单元格内容的顶端与其行顶端对齐；对于跨行单元格，单元格内容的顶端与其所跨的第一行的顶端对齐。

bottom

单元格内容的底端与其行底端对齐，对于跨行单元格，单元格内容的底端与其所跨的最后一行的底端对齐。

middle

单元格内容的中间与其行中间对齐；对于跨行单元格，单元格内容的中间与其所跨行的中间对齐。

这三种情况见图使用了以下样式和标记：

table{table-layout: auto; width: 20em;

border-collapse: separate; border-spacing: 3px;}

td {border: 1px solid; background: silver; padding: 0;}

div {border: 1px dashed gray; background: white;}

#r1c1 {vertical-align: top; height: l0em;}

#r1c2 {verCical-align: middle;}

#rlc3 {vertical-align: bottom;}

<table>

<tr>

<td id="r1c1">

<div>

The contents of this cell are top-aligned.

</div>

</td>

<td id="r1c2">

<div>

The contents of this cell are middle-aligned.

</div>

</ta>

<td id="r1c3">

The contents of this cell are bottom-aligned.

</div>

</cd>

</tr>

</table>

在设计网页的时候，在上述各种情况下，会自动地增加单元格本身的内边距完成对齐，来达到所需的效果。图11-13的第一个单元格中，单元格的下内边距修改为等于单元格框的高度与单元格中内容的高度之差。对于第二个单元格，单元格的上下内边距重置为相等，从而将单元格的内容垂直居中。最后一个单元格中，单元格的上内边距得到修改。

第4个可能的对齐值是baseline，这比前三个值要稍微复杂一些：

baseline

网页设计时，单元格的基线与其行的基线对齐，对于跨行单元格，该单元格的基线与所跨的第一行的基线对齐。

行的基线由该行所有单元格中最低初始单元格基线定义（也就是第一个文本行的基线）。因此，在图11-14中，行的基线由第三个单元格定义，这个单元格初始基线最低。前两个单元格则将其第一个文本行的基线与该行基线对齐。

与顶端对齐、居中对齐和底端对齐类似，基线对齐的单元格内容也是通过调整单元格的上下内边距来放置，如果一行中的所有单元格都不是基线对齐，那么这一行甚至没有基线，它也不需要有基线。

如果某些单元格是基线对齐，则确定该行的基线，并放置这些基线对齐单元格的内容。

放置所有顶端对齐单元格的内容。行现在有了一个临时高度，由已经放置了内容的单元格的最低单元格底端确定。

如果剩下的单元格是居中对齐或底端对齐，而且内容高度大于临时行高，行高则增加到可以包含其中最高的单元格。

放置所有余下单元格的内容。如果单元格内容的高度比行高小，则增加单元格的内边距，使之适应行高。

vertical-align值sub、super, text-top和 text-bottom应用到表单元格时会被忽略。

th {vertical-align: text-top;}