標(biāo)準(zhǔn)化——表格

更新時(shí)間：2006年09月23日 00:00:00 作者：

對(duì)于那些剛接觸CSS布局的人來(lái)說(shuō)，常對(duì)如何使用表格（table）感到迷惑。我在很多地方看到人們把“避免用表格來(lái)布局”理解成“完全不使用table標(biāo)簽”。值得注意的是，表格是可以用的而且非常好用——只要用的正確。

是的，你得盡量的去避免用表格來(lái)布局。但是對(duì)于表格型數(shù)據(jù)，你就應(yīng)該使用table。我想談?wù)勅绾问褂帽砀駚?lái)組織表現(xiàn)表格型數(shù)據(jù)。在HTML和XHTML里，表格不僅僅是行（row）和單元格（cell），還有很多其他元素，特別是如果你想讓數(shù)據(jù)更加容易理解。

首先來(lái)點(diǎn)背景知識(shí)，“避免用表格來(lái)布局”這句話可以在HTML 4.01 規(guī)范的表格介紹部分里面找到：

表格不應(yīng)該純粹的被用來(lái)布局文檔內(nèi)容，這樣可能在處理渲染非可視媒體的時(shí)候產(chǎn)生問(wèn)題。另外，當(dāng)和圖片一起使用的時(shí)候，這些表格可能在某個(gè)系統(tǒng)上顯示過(guò)大而強(qiáng)迫用戶拖動(dòng)水平滾動(dòng)條，為了減少這些問(wèn)題，設(shè)計(jì)者應(yīng)該使用樣式表來(lái)控制布局而不是表格。

這樣已經(jīng)很明白了，盡管文檔中說(shuō)“應(yīng)該”而不是“必須”，所以這個(gè)規(guī)范還是有彈性的。

但是本文并不是討論是否使用表格布局，而是使用表格來(lái)組織表現(xiàn)表格型數(shù)據(jù)——這是表格誕生的本意。

當(dāng)表格用來(lái)組織實(shí)際的數(shù)據(jù)時(shí)，不僅僅是一個(gè)編排布局的格子而已。一般人可以從表格的編排和表現(xiàn)上看出標(biāo)題和數(shù)據(jù)單元格之間的關(guān)系。盲人或者有視覺(jué)障礙的人則不能做到這一點(diǎn)。如果一個(gè)表格要讓那些使用屏幕閱讀器或用其他非可視用戶代理（UA）的人們能夠理解，它則需要告訴用戶代理它包含的信息之間是如何聯(lián)系起來(lái)的。

幸運(yùn)的是，HTML在這方面提供了很多元素和屬性。然而，使用這些可以增強(qiáng)易用性和語(yǔ)義化的功能比較難而且本身不容易理解。在本文中，我嘗試著解釋如何使用他們。

表頭， <th>

讓我們從一個(gè)非常簡(jiǎn)單的表格開(kāi)始——只包含一行表頭和兩行三列的數(shù)據(jù)。如果用以前流行的做法，只用表格的行和單元格，寫(xiě)出來(lái)就如下：

<table>
<tr>
<td>公司</td>
<td>雇員</td>
<td>成立于</td>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

沒(méi)有邊框和修飾，那么上面的代碼在你現(xiàn)在的瀏覽器里看起來(lái)就如下：

公司	雇員	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

用CSS稍微修飾一下表格，你可以使表頭在圖形化瀏覽器里面更加明顯：

公司	雇員	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

一個(gè)視力正常的人，很容易并且很快就可以明白表頭和數(shù)據(jù)單元格之間的關(guān)系。從另一方面講，那些使用屏幕閱讀器的人可以聽(tīng)到如下順序的詞：公司，雇員，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的關(guān)系。

第一步——最簡(jiǎn)單的——通過(guò)適當(dāng)?shù)臉?biāo)出表頭來(lái)使得表格更加有意義。很簡(jiǎn)單：只要使用<th>標(biāo)簽取代表頭的<td>標(biāo)簽即可。

<table>
<tr>
<th>公司</th>
<th>雇員</th>
<th>成立于</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

公司	雇員	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

這個(gè)例子雖然簡(jiǎn)單，但是已經(jīng)包含了足夠的信息使得屏幕閱讀器能夠讓使用者明白表頭和數(shù)據(jù)單元格之間的關(guān)系。一個(gè)屏幕閱讀器一般會(huì)這么讀：公司: ACME Inc. ，雇員: 1000，成立于: 1947., 以此類(lèi)推。比之前好多了。

表格標(biāo)題， <caption>

<caption>標(biāo)簽可以為表格提供一個(gè)簡(jiǎn)短的說(shuō)明，和圖像的說(shuō)明比較類(lèi)似。默認(rèn)情況下，大部分可視化瀏覽器顯示表格標(biāo)題在表格的上方中央。CSS里的caption-side屬性用來(lái)控制表格標(biāo)題顯示的地方。大部分瀏覽器只能把表格標(biāo)題顯示在表格的上方或者下方，只有一些瀏覽器支持左邊或者右邊。這個(gè)就留給大家去試試了。

使用的時(shí)候，<caption>標(biāo)簽一定要緊接著開(kāi)始的<table>標(biāo)簽寫(xiě)，如下：

<table>
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

當(dāng)然你也可以用CSS去樣式化表格標(biāo)題。然而，要在不同瀏覽器里獲得同樣的效果還需要一定的技巧，這個(gè)也留給各位去實(shí)踐了。

表格釋義：summary屬性

一般人可以很容易的決定是否研究一下表格的細(xì)節(jié)，只要瞥一眼就可以看出表格有多大、大概有什么內(nèi)容。但是使用屏幕閱讀器的人就不是那么容易了，除非我們給表格加上summary屬性。這樣可以提供比<caption>標(biāo)簽更詳細(xì)的描述。

sumary屬性的內(nèi)容不會(huì)被可視化瀏覽器顯示，所以可以盡可能的讓描述足夠長(zhǎng)，使得那些用“聽(tīng)”的瀏覽者了解表格的內(nèi)容。當(dāng)然也不要用過(guò)頭了，當(dāng)有需要的時(shí)候才加上summary屬性，比如對(duì)于很復(fù)雜的表格，添加一個(gè)summary屬性可以使用屏幕閱讀器人比較簡(jiǎn)單的了解表格的內(nèi)容。

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

縮寫(xiě)表頭:abbr屬性

當(dāng)屏幕閱讀器遇到一個(gè)表格，每一行會(huì)把表頭連每一個(gè)數(shù)據(jù)單元格一起讀出來(lái)。如果表頭很長(zhǎng)，聽(tīng)一遍一遍的讀是十分乏味的。通過(guò)使用abbr屬性，可以給那些長(zhǎng)的表頭提供簡(jiǎn)寫(xiě)形式，取代表頭的內(nèi)容。abbr屬性是可選的，大部分情況表頭還是（或許是應(yīng)該）比較簡(jiǎn)短的。

稍微修改一下剛才的表格，讓表頭更長(zhǎng)些，abbr屬性就可以這樣用：

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th abbr="Company">Company Name</th>
<th abbr="Employees">Number of Employees</th>
<th abbr="Founded">Foundation Year</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
Company Name	Number of Employees	Foundation Year
ACME Inc	1000	1947
XYZ Corp	2000	1973

對(duì)于第一行數(shù)據(jù)，屏幕閱讀器會(huì)讀表頭的全稱(chēng)，而從第二行開(kāi)始即使用簡(jiǎn)稱(chēng)。

這樣讓數(shù)據(jù)表格適應(yīng)布局是挺困難的，而以下的做法更為常見(jiàn)：即讓表頭盡可能的短，或者簡(jiǎn)寫(xiě)，使用title屬性或者<abbr>標(biāo)簽提供一個(gè)更長(zhǎng)的說(shuō)明。

把表頭和數(shù)據(jù)聯(lián)系起來(lái)：scope，id，headers屬性

就我用到現(xiàn)在，很多表格要比上面提供的例子復(fù)雜的多。讓例子復(fù)雜一點(diǎn)，我會(huì)移去“Company”表頭，并且把第一列的數(shù)據(jù)移到表頭單元格里：

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<th>ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th>XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

在這個(gè)表格里，每一個(gè)數(shù)據(jù)單元格都有兩個(gè)表頭。最簡(jiǎn)單的方法讓那些非可視的瀏覽器理解這個(gè)表格，就是為每個(gè)表頭添加一個(gè)scope屬性。

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<th scope="row">ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th scope="row">XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Scope屬性同時(shí)定義了行的表頭和列的表頭：

col: 列表頭
row: 行表頭

在第一行的加上值為col的scope屬性，聲明他們是下面數(shù)據(jù)單元格的表頭。同樣的，給每行的開(kāi)頭<th>加上值為row的scope屬性聲明他們是右邊數(shù)據(jù)單元格的表頭。

Scope屬性還有兩個(gè)值：

colgroup: 定義列組（column group）的表頭信息
rowgroup: 定義行組（row group）的表頭信息

一個(gè)列組是由<colgroup>標(biāo)簽定義的。行組則是由<thead>、<tfoot>和<tbody>定義的。稍后我將會(huì)詳細(xì)介紹它們。

如果你既想要保留“Company”表頭，而又想讓公司名字作為行表頭（row headers）顯示，你會(huì)怎么做？那樣的話，應(yīng)該使得包含公司名字的單元格同時(shí)提供表頭和數(shù)據(jù)信息。也就是說(shuō)，<td>標(biāo)簽也應(yīng)該加上scope屬性：

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th scope="col">Company</th>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

這樣的話可視化瀏覽器不會(huì)默認(rèn)的把company name顯示為表頭。所以需要用CSS來(lái)修正一下，就剛才那個(gè)例子，我使用了下面的CSS：

td[scope] {
font-weight:bold;
}

要注意上面的規(guī)則使用了屬性選擇符，IE是不支持的。而通過(guò)添加一個(gè)class來(lái)樣式化表頭是個(gè)不錯(cuò)的辦法。

Table 1: Company data
Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

另一個(gè)連接表格數(shù)據(jù)單元格和表頭的方法就是給每一個(gè)表頭添加一個(gè)唯一的ID。然后為下面的數(shù)據(jù)單元格添加headers屬性，這個(gè)headers屬性值包含用空格分開(kāi)的各個(gè)ID，這些ID代表的表頭各自關(guān)聯(lián)到該數(shù)據(jù)單元格上。這樣做很復(fù)雜，只是當(dāng)有超過(guò)兩個(gè)表頭的單元格才用。在復(fù)雜的和不規(guī)則的表格中，scope屬性就力不從心了。

為了演示，我修改了一下表格，加上了公司雇員性別及人數(shù)：

<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td rowspan="2"></td>
<th id="employees" colspan="2">Employees</th>
<th id="founded" rowspan="2">Founded</th>
</tr>
<tr>
<th id="men">Men</th>
<th id="women">Women</th>
</tr>
<tr>
<th id="acme">ACME Inc</th>
<td headers="acme employees men">700</td>
<td headers="acme employees women">300</td>
<td headers="acme founded">1947</td>
</tr>
<tr>
<th id="xyz">XYZ Corp</th>
<td headers="xyz employees men">1200</td>
<td headers="xyz employees women">800</td>
<td headers="xyz founded">1973</td>
</tr>
</table>

Table 1: Company data
	Men	Women	Founded
	Employees		Founded
ACME Inc	700	300	1947
XYZ Corp	1200	800	1973

你可以發(fā)現(xiàn)，這種方法真的很麻煩，所以如果可能的話，還是盡量用scope屬性吧。

跨行和跨列

在以前用表格布局的年代，rowspan屬性和colspan屬性常被用來(lái)讓單元格跨幾列或跨幾行，來(lái)布局那些經(jīng)過(guò)整齊切割的圖像。這兩個(gè)屬性現(xiàn)在還在用，因?yàn)椴](méi)有CSS來(lái)控制單元格的跨行和跨列。仔細(xì)想想，其實(shí)是很有道理的：跨行和跨列示表格結(jié)構(gòu)(structure)的一部分，而不是其表現(xiàn)(presentation)。

列和列組：<col>和<colgroup>

HTML提供了<colgroup>和<col>標(biāo)簽來(lái)為相關(guān)的表格列分組。這樣就可以（在一些瀏覽器中）使用CSS來(lái)單獨(dú)的為列樣式化。列組也可以使用scope屬性來(lái)標(biāo)明其表頭信息。

這就是我要說(shuō)的關(guān)于列和列組的全部。更多信息參考“其他”部分。

行組： <thead>, <tfoot>, 和<tbody>

表格的行可以分組為表頭組(<thead>), 表尾（或表注）組(<tfoot>), 然后是一個(gè)或多個(gè)表身(<tbody>) 。每一個(gè)行組必須包含一個(gè)或多個(gè)表格行。

如果一個(gè)表格包含<thead>，那么它必須出現(xiàn)在<tfoot>和<tbody>之前。而<tfoot>則必須出現(xiàn)在<tbody>之前。如果沒(méi)有使用<thead>和<tfoot>，那么<tbody>標(biāo)簽也可以不加（也不是非得不加，隨你喜歡了）。一個(gè)有行組的表格結(jié)構(gòu)看起來(lái)如下：

<table>
<thead>
<tr></tr>
… 更多表頭的行
</thead>
<tfoot>
<tr></tr>
… 更多表尾的行
</tfoot>
<tbody>
<tr></tr>
… 第一個(gè)<tbody>的行
</tbody>
<tbody>
<tr></tr>
… 第二個(gè)<tbody>的行
</tbody>
… 更多的<tbody>
</table>

使用行組有以下幾個(gè)原因：

這樣樣式化表頭、表尾和表身比較方便，而且獨(dú)立，不必要給每個(gè)標(biāo)簽加樣式或class。
當(dāng)打印比較長(zhǎng)的表格的時(shí)候，一些瀏覽器（比如基于Mozilla的）會(huì)在每一頁(yè)的開(kāi)頭重復(fù)表頭和表尾的內(nèi)容，這樣閱讀打印版本的表格就比較方便。
區(qū)分開(kāi)表頭和表尾也可以使一些瀏覽器瀏覽表格的時(shí)候，只滾動(dòng)表身。

僅為數(shù)據(jù)表格而寫(xiě)

本文所寫(xiě)的所有都是關(guān)于使用HTML表格來(lái)組織和表現(xiàn)數(shù)據(jù)。如果你還是想用表格來(lái)布局，那么上文所述的都沒(méi)有意義而且用不到。沒(méi)有summary屬性、沒(méi)有表頭、沒(méi)有<caption>、什么都沒(méi)有，沒(méi)有格式，陳舊的布局表格除了<table>,<tr>,<td>什么都可以不要。另外還要承擔(dān)風(fēng)險(xiǎn)，即如何面對(duì)那些非可視的用戶代理（UA）。

優(yōu)勢(shì)

看來(lái)要用HTML做一個(gè)有語(yǔ)義化的數(shù)據(jù)表格有很多工作。對(duì)于復(fù)雜的表格是這樣的。有時(shí)候基本上是不可能手工寫(xiě)出來(lái)的。但是對(duì)于簡(jiǎn)單的表格，那么使用一個(gè)<th>加上scope屬性就可以了，又快又簡(jiǎn)單。

非常明顯，語(yǔ)義化的表格對(duì)于使用屏幕閱讀器或其他輔助技術(shù)的瀏覽者非常有好處。讓那些巨大而復(fù)雜的表格“聽(tīng)”起來(lái)很有意義是非常困難的，所以盡可能的使表格簡(jiǎn)單。

另外對(duì)于使用可視化瀏覽器的設(shè)計(jì)者和用戶也是有好處的：一個(gè)語(yǔ)義化的表格有大量的接口可以利用CSS來(lái)樣式化，好的樣式可以讓表格更加易用。

其他

除了本文，還有更多關(guān)于數(shù)據(jù)表格內(nèi)容。比如這里就沒(méi)有提到axis屬性，并且對(duì)于<colgroup>和<col>的描述也不是很深。對(duì)于格式化和樣式化還有border模型我也沒(méi)有深究，還缺少一個(gè)真正復(fù)雜的表格的例子。

想了解更多信息，可以參考以下文章：