高度

在網(wǎng)頁(yè)設計時(shí)，確定表的寬度要花這么大功夫，現在你可能想知道計算高度又會(huì )多復雜。實(shí)標上，在CSS 中，高度計算相當簡(jiǎn)單，不過(guò)瀏覽器開(kāi)發(fā)人員可能不這么認為。

最容易的一種情況是，直接由height屬性顯式設置高度。在這種情況下，表的高度就由height值確定。這說(shuō)明表可能比行高總和高或矮，不過(guò)2006年4月11日發(fā)布的CSS 2.1規范草案指出，將height看作是表框的最小高度。對于這些情況，CSS2.1規范明確地拒絕定義會(huì )發(fā)生什么，而只是指出CSS的將來(lái)版本可能解決這個(gè)問(wèn)埋。用戶(hù)代理可以擴展或收縮表中的表行來(lái)適應表的高度，也可以在表框中留白或者采取其他完全不同的做法。這完全由各個(gè)用戶(hù)代理決定。

如果表的高度是auto，其高度則是表中所有行的行高再加上所有邊框和單元格間隔的總和。要確定各行的高度，用戶(hù)代理需要完成一個(gè)與確定列寬類(lèi)似的過(guò)程。它要計算各單元格內容的最小和最大高度，然后使用這些最小和最大高度得出行的最小和最大高度。確定了所有行的最小和最大高度后，用戶(hù)代理再得出各行的高度應當是多少，把這些行加在一起，然后使用這個(gè)計算確定表的高度。這與行內布局很類(lèi)似，只不過(guò)對于結果不那么確定。

除了處理有明確高度的表以及表中的行高，還可以增加以下內容，這是CSS2.1中沒(méi)有定義的：

表單元格高度為百分數時(shí)的效果

表行和行組高度為百分數時(shí)的效果

跨行單元格如何影響所跨行的高度（除了這些行必須包含該跨行單元格）

可以看到，表的高度計算在很大程度上留給用戶(hù)代理來(lái)決定，歷史證明，各用戶(hù)代理很可能有不同的做法，所以你要盡可能避免設置高度。

對齊

有意思的是，相對于單元格和行的高度，定義單元格中內容的對齊要容易得多。甚至垂直對齊也很容易定義（垂直對齊很容易影響行高）。

水平對齊是最簡(jiǎn)單的。要讓一個(gè)單元格中的內容對齊，可以使用text-align屬性。實(shí)際上，單元格會(huì )處理為一個(gè)塊級框，其中的所有內容都根據text-align值對齊（有關(guān)text-align的詳細內容見(jiàn)第6章）。

要將一個(gè)表單元格中的內容垂直對齊，可以使用vertical-align屬性。它使用的很多值與垂直對齊行內內容是一樣的，不過(guò)應用到表單元格時(shí)這些值的含義有所變化。下面對三種最簡(jiǎn)單的情況做個(gè)總結：

top

單元格內容的頂端與其行頂端對齊；對于跨行單元格，單元格內容的頂端與其所跨的第一行的頂端對齊。

bottom

單元格內容的底端與其行底端對齊，對于跨行單元格，單元格內容的底端與其所跨的最后一行的底端對齊。

middle

單元格內容的中間與其行中間對齊；對于跨行單元格，單元格內容的中間與其所跨行的中間對齊。

這三種情況見(jiàn)圖使用了以下樣式和標記：

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>

在設計網(wǎng)頁(yè)的時(shí)候，在上述各種情況下，會(huì )自動(dòng)地增加單元格本身的內邊距完成對齊，來(lái)達到所需的效果。圖11-13的第一個(gè)單元格中，單元格的下內邊距修改為等于單元格框的高度與單元格中內容的高度之差。對于第二個(gè)單元格，單元格的上下內邊距重置為相等，從而將單元格的內容垂直居中。最后一個(gè)單元格中，單元格的上內邊距得到修改。

第4個(gè)可能的對齊值是baseline，這比前三個(gè)值要稍微復雜一些：

baseline

網(wǎng)頁(yè)設計時(shí)，單元格的基線(xiàn)與其行的基線(xiàn)對齊，對于跨行單元格，該單元格的基線(xiàn)與所跨的第一行的基線(xiàn)對齊。

行的基線(xiàn)由該行所有單元格中最低初始單元格基線(xiàn)定義（也就是第一個(gè)文本行的基線(xiàn)）。因此，在圖11-14中，行的基線(xiàn)由第三個(gè)單元格定義，這個(gè)單元格初始基線(xiàn)最低。前兩個(gè)單元格則將其第一個(gè)文本行的基線(xiàn)與該行基線(xiàn)對齊。

與頂端對齊、居中對齊和底端對齊類(lèi)似，基線(xiàn)對齊的單元格內容也是通過(guò)調整單元格的上下內邊距來(lái)放置，如果一行中的所有單元格都不是基線(xiàn)對齊，那么這一行甚至沒(méi)有基線(xiàn)，它也不需要有基線(xiàn)。

如果某些單元格是基線(xiàn)對齊，則確定該行的基線(xiàn)，并放置這些基線(xiàn)對齊單元格的內容。

放置所有頂端對齊單元格的內容。行現在有了一個(gè)臨時(shí)高度，由已經(jīng)放置了內容的單元格的最低單元格底端確定。

如果剩下的單元格是居中對齊或底端對齊，而且內容高度大于臨時(shí)行高，行高則增加到可以包含其中最高的單元格。

放置所有余下單元格的內容。如果單元格內容的高度比行高小，則增加單元格的內邊距，使之適應行高。

vertical-align值sub、super, text-top和 text-bottom應用到表單元格時(shí)會(huì )被忽略。

th {vertical-align: text-top;}