對于那些剛接觸CSS布局的人來說，常對如何使用表格（table）感到迷惑。我在很多地方看到人們把“避免用表格來布局”理解成“完全不使用table標簽”。值得注意的是，表格是可以用的而且非常好用——只要用的正確。
是的，你得盡量的去避免用表格來布局。但是對于表格型數據，你就應該使用table。我想談談如何使用表格來組織表現表格型數據。在HTML和XHTML里，表格不僅僅是行（row）和單元格（cell），還有很多其他元素，特別是如果你想讓數據更加容易理解。
首先來點背景知識，“避免用表格來布局”這句話可以在HTML 4.01 規范的表格介紹部分里面找到：
表格不應該純粹的被用來布局文檔內容，這樣可能在處理渲染非可視媒體的時候產生問題。另外，當和圖片一起使用的時候，這些表格可能在某個系統上顯示過大而強迫用戶拖動水平滾動條，為了減少這些問題，設計者應該使用樣式表來控制布局而不是表格。
這樣已經很明白了，盡管文檔中說“應該”而不是“必須”，所以這個規范還是有彈性的。
但是本文并不是討論是否使用表格布局，而是使用表格來組織表現表格型數據——這是表格誕生的本意。
當表格用來組織實際的數據時，不僅僅是一個編排布局的格子而已。一般人可以從表格的編排和表現上看出標題和數據單元格之間的關系。盲人或者有視覺障礙的人則不能做到這一點。如果一個表格要讓那些使用屏幕閱讀器或用其他非可視用戶代理（UA）的人們能夠理解，它則需要告訴用戶代理它包含的信息之間是如何聯系起來的。
幸運的是，HTML在這方面提供了很多元素和屬性。然而，使用這些可以增強易用性和語義化的功能比較難而且本身不容易理解。在本文中，我嘗試著解釋如何使用他們。
表格頭<th>
讓我們從一個非常簡單的表格開始——只包含一行表頭和兩行三列的數據。如果用以前流行的做法，只用表格的行和單元格，寫出來就如下：
<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>
沒有邊框和修飾，那么上面的代碼在你現在的瀏覽器里看起來就如下：
公司 雇員 成立于
ACME Inc 1000 1947
XYZ Corp 2000 1973
用CSS稍微修飾一下表格，你可以使表頭在圖形化瀏覽器里面更加明顯：
公司 雇員 成立于
ACME Inc 1000 1947
XYZ Corp 2000 1973
一個視力正常的人，很容易并且很快就可以明白表頭和數據單元格之間的關系。從另一方面講，那些使用屏幕閱讀器的人可以聽到如下順序的詞：公司，雇員，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的關系。
第一步——最簡單的——通過適當的標出表頭來使得表格更加有意義。很簡單：只要使用<th>標簽取代表頭的<td>標簽即可。
<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
這個例子雖然簡單，但是已經包含了足夠的信息使得屏幕閱讀器能夠讓使用者明白表頭和數據單元格之間的關系。一個屏幕閱讀器一般會這么讀：公司: ACME Inc. ，雇員: 1000，成立于: 1947., 以此類推。比之前好多了。
表格標題， <caption>
<caption>標簽可以為表格提供一個簡短的說明，和圖像的說明比較類似。默認情況下，大部分可視化瀏覽器顯示表格標題在表格的上方中央。CSS里的caption-side屬性用來控制表格標題顯示的地方。大部分瀏覽器只能把表格標題顯示在表格的上方或者下方，只有一些瀏覽器支持左邊或者右邊。這個就留給大家去試試了。
使用的時候，<caption>標簽一定要緊接著開始的<table>標簽寫，如下：
<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
當然你也可以用CSS去樣式化表格標題。然而，要在不同瀏覽器里獲得同樣的效果還需要一定的技巧，這個也留給各位去實踐了。
表格釋義：summary屬性
一般人可以很容易的決定是否研究一下表格的細節，只要瞥一眼就可以看出表格有多大、大概有什么內容。但是使用屏幕閱讀器的人就不是那么容易了，除非我們給表格加上summary屬性。這樣可以提供比<caption>標簽更詳細的描述。
sumary屬性的內容不會被可視化瀏覽器顯示，所以可以盡可能的讓描述足夠長，使得那些用“聽”的瀏覽者了解表格的內容。當然也不要用過頭了，當有需要的時候才加上summary屬性，比如對于很復雜的表格，添加一個summary屬性可以使用屏幕閱讀器人比較簡單的了解表格的內容。
<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>
縮寫表頭:abbr屬性
當屏幕閱讀器遇到一個表格，每一行會把表頭連每一個數據單元格一起讀出來。如果表頭很長，聽一遍一遍的讀是十分乏味的。通過使用abbr屬性，可以給那些長的表頭提供簡寫形式，取代表頭的內容。abbr屬性是可選的，大部分情況表頭還是（或許是應該）比較簡短的。
稍微修改一下剛才的表格，讓表頭更長些，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
對于第一行數據，屏幕閱讀器會讀表頭的全稱，而從第二行開始即使用簡稱。
這樣讓數據表格適應布局是挺困難的，而以下的做法更為常見：即讓表頭盡可能的短，或者簡寫，使用title屬性或者<abbr>標簽提供一個更長的說明。
把表頭和數據聯系起來：scope，id，headers屬性
就我用到現在，很多表格要比上面提供的例子復雜的多。讓例子復雜一點，我會移去“Company”表頭，并且把第一列的數據移到表頭單元格里：
<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
在這個表格里，每一個數據單元格都有兩個表頭。最簡單的方法讓那些非可視的瀏覽器理解這個表格，就是為每個表頭添加一個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屬性同時定義了行的表頭和列的表頭：
col: 列表頭
row: 行表頭
在第一行的<th>加上值為col的scope屬性，聲明他們是下面數據單元格的表頭。同樣的，給每行的開頭<th>加上值為row的scope屬性聲明他們是右邊數據單元格的表頭。
Scope屬性還有兩個值：
colgroup: 定義列組（column group）的表頭信息
rowgroup: 定義行組（row group）的表頭信息
一個列組是由<colgroup>標簽定義的。行組則是由<thead>、<tfoot>和<tbody>定義的。稍后我將會詳細介紹它們。
如果你既想要保留“Company”表頭，而又想讓公司名字作為行表頭（row headers）顯示，你會怎么做？那樣的話，應該使得包含公司名字的單元格同時提供表頭和數據信息。也就是說，<td>標簽也應該加上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>
這樣的話可視化瀏覽器不會默認的把company name顯示為表頭。所以需要用CSS來修正一下，就剛才那個例子，我使用了下面的CSS：
td[scope] {
font-weight:bold;
}
要注意上面的規則使用了屬性選擇符，IE是不支持的。而通過添加一個class來樣式化表頭是個不錯的辦法。
Table 1: Company data Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
另一個連接表格數據單元格和表頭的方法就是給每一個表頭添加一個唯一的ID。然后為下面的數據單元格添加headers屬性，這個headers屬性值包含用空格分開的各個ID，這些ID代表的表頭各自關聯到該數據單元格上。這樣做很復雜，只是當有超過兩個表頭的單元格才用。在復雜的和不規則的表格中，scope屬性就力不從心了。
為了演示，我修改了一下表格，加上了公司雇員性別及人數：
<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 Employees Founded
Men Women
ACME Inc 700 300 1947
XYZ Corp 1200 800 1973
你可以發現，這種方法真的很麻煩，所以如果可能的話，還是盡量用scope屬性吧。
跨行和跨列
在以前用表格布局的年代，rowspan屬性和colspan屬性常被用來讓單元格跨幾列或跨幾行，來布局那些經過整齊切割的圖像。這兩個屬性現在還在用， 因為并沒有CSS來控制單元格的跨行和跨列。仔細想想，其實是很有道理的：跨行和跨列示表格結構(structure)的一部分，而不是其表現(presentation)。
列和列組：<col>和<colgroup>
HTML提供了<colgroup>和<col>標簽來為相關的表格列分組。這樣就可以（在一些瀏覽器中）使用CSS來單獨的為列樣式化。列組也可以使用scope屬性來標明其表頭信息。
這就是我要說的關于列和列組的全部。更多信息參考“其他”部分。
行組： <thead>, <tfoot>, 和<tbody>
表格的行可以分組為表頭組(<thead>), 表尾（或表注）組(<tfoot>), 然后是一個或多個表身(<tbody>) 。每一個行組必須包含一個或多個表格行。
如果一個表格包含<thead>，那么它必須出現在<tfoot>和<tbody>之前。而<tfoot>則必須出現在<tbody>之前。如果沒有使用<thead>和<tfoot>，那么<tbody>標簽也可以不加（也不是非得不加，隨你喜歡了）。一個有行組的表格結構看起來如下：
<table>
<thead>
<tr></tr>
… 更多表頭的行
</thead>
<tfoot>
<tr></tr>
… 更多表尾的行
</tfoot>
<tbody>
<tr></tr>
… 第一個<tbody>的行
</tbody>
<tbody>
<tr></tr>
… 第二個<tbody>的行
</tbody>
… 更多的<tbody>
</table>
使用行組有以下幾個原因：
這樣樣式化表頭、表尾和表身比較方便，而且獨立，不必要給每個標簽加樣式或class。
當打印比較長的表格的時候，一些瀏覽器（比如基于Mozilla的）會在每一頁的開頭重復表頭和表尾的內容，這樣閱讀打印版本的表格就比較方便。
區分開表頭和表尾也可以使一些瀏覽器瀏覽表格的時候，只滾動表身。
僅為數據表格而寫
本文所寫的所有都是關于使用HTML表格來組織和表現數據。如果你還是想用表格來布局，那么上文所述的都沒有意義而且用不到。沒有summary屬性、沒有表頭、沒有<caption>、什么都沒有，沒有格式，陳舊的布局表格除了<table>,<tr>,<td>什么都可以不要。另外還要承擔風險，即如何面對那些非可視的用戶代理（UA）。
優勢
看來要用HTML做一個有語義化的數據表格有很多工作。對于復雜的表格是這樣的。有時候基本上是不可能手工寫出來的。但是對于簡單的表格，那么使用一個<th>加上scope屬性就可以了，又快又簡單。
非常明顯，語義化的表格對于使用屏幕閱讀器或其他輔助技術的瀏覽者非常有好處。讓那些巨大而復雜的表格“聽”起來很有意義是非常困難的，所以盡可能的使表格簡單。
另外對于使用可視化瀏覽器的設計者和用戶也是有好處的：一個語義化的表格有大量的接口可以利用CSS來樣式化，好的樣式可以讓表格更加易用。
其他
除了本文，還有更多關于數據表格內容。比如這里就沒有提到axis屬性，并且對于<colgroup>和<col>的描述也不是很深。對于格式化和樣式化還有border模型我也沒有深究，還缺少一個真正復雜的表格的例子。
您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。
蘇公網安備 32070502010230號