標準化——表格_CSS/HTML

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

是的，你得盡量的去避免用表格來布局。但是對於表格型資料，你就應該使用table。我想談談如何使用表格來組織表現表格型資料。在HTML和XHTML裡，表格不僅僅是行（row）和儲存格（cell），還有很多其他元素，特別是如果你想讓資料更加容易理解。

首先來點背景知識，“避免用表格來布局”這句話可以在HTML 4.01 規範的表格介紹部分裡面找到：

表格不應該純粹的被用來布局文檔內容，這樣可能在處理渲染非可視媒體的時候產生問題。另外，當和圖片一起使用的時候，這些表格可能在某個系統上顯示過大而強迫使用者拖動水平捲軸，為了減少這些問題，設計者應該使用樣式表來控制布局而不是表格。

這樣已經很明白了，儘管文檔中說“應該”而不是“必須”，所以這個規範還是有彈性的。

但是本文並不是討論是否使用表格版面配置，而是使用表格來組織表現表格型資料——這是表格誕生的本意。

當表格用來組織實際的資料時，不僅僅是一個編排布局的格子而已。一般人可以從表格的編排和表現上看出標題和資料儲存格之間的關係。盲人或者有視覺障礙的人則不能做到這一點。如果一個表格要讓那些使用螢幕助讀程式或用其他非可視使用者代理程式（UA）的人們能夠理解，它則需要告訴使用者代理程式它包含的資訊之間是如何聯絡起來的。

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

表頭，

讓我們從一個非常簡單的表格開始——只包含一行表頭和兩行三列的資料。如果用以前流行的做法，只用表格的行和儲存格，寫出來就如下：

1. 






























公司	僱員	成立於
ACME Inc	1000	1947
XYZ Corp	2000	1973

沒有邊框和修飾，那麼上面的代碼在你現在的瀏覽器裡看起來就如下：

公司	僱員	成立於
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。不是十分容易明白其中的關係。

第一步——最簡單的——通過適當的標出表頭來使得表格更加有意義。很簡單：只要使用標籤取代表頭的標籤即可。

1. 






























公司	僱員	成立於
ACME Inc	1000	1947
XYZ Corp	2000	1973

公司	僱員	成立於
ACME Inc	1000	1947
XYZ Corp	2000	1973

這個例子雖然簡單，但是已經包含了足夠的資訊使得螢幕助讀程式能夠讓使用者明白表頭和資料儲存格之間的關係。一個螢幕助讀程式一般會這麼讀：公司: ACME Inc. ，僱員: 1000，成立於: 1947., 以此類推。比之前好多了。

表格標題，

標籤可以為表格提供一個簡短的說明，和映像的說明比較類似。預設情況下，大部分可視化瀏覽器顯示表格標題在表格的上方中央。CSS裡的caption-side屬性用來控製表格標題顯示的地方。大部分瀏覽器只能把表格標題顯示在表格的上方或者下方，只有一些瀏覽器支援左邊或者右邊。這個就留給大家去試試了。

使用的時候，標籤一定要緊接著開始的

標籤寫，如下：

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

當然你也可以用CSS去樣式化表格標題。然而，要在不同瀏覽器裡獲得同樣的效果還需要一定的技巧，這個也留給各位去實踐了。

表格釋義：summary屬性

一般人可以很容易的決定是否研究一下表格的細節，只要瞥一眼就可以看出表格有多大、大概有什麼內容。但是使用螢幕助讀程式的人就不是那麼容易了，除非我們給表格加上summary屬性。這樣可以提供比標籤更詳細的描述。

sumary屬性的內容不會被可視化瀏覽器顯示，所以可以儘可能的讓描述足夠長，使得那些用“聽”的瀏覽者瞭解表格的內容。當然也不要用過頭了，當有需要的時候才加上summary屬性，比如對於很複雜的表格，添加一個summary屬性可以使用螢幕助讀程式人比較簡單的瞭解表格的內容。

1. 
































Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

縮寫表頭:abbr屬性

當螢幕助讀程式遇到一個表格，每一行會把表頭連每一個資料儲存格一起讀出來。如果表頭很長，聽一遍一遍的讀是十分乏味的。通過使用abbr屬性，可以給那些長的表頭提供簡寫形式，取代表頭的內容。abbr屬性是可選的，大部分情況表頭還是（或許是應該）比較簡短的。

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

1. 
































Table 1: Company data

Company Name	Number of Employees	Foundation Year
ACME Inc	1000	1947
XYZ Corp	2000	1973

Table 1: Company data

Company Name	Number of Employees	Foundation Year
ACME Inc	1000	1947
XYZ Corp	2000	1973

對於第一行資料，螢幕助讀程式會讀表頭的全稱，而從第二行開始即使用簡稱。

這樣讓資料表格適應布局是挺困難的，而以下的做法更為常見：即讓表頭儘可能的短，或者簡寫，使用title屬性或者標籤提供一個更長的說明。

把表頭和資料聯絡起來：scope，id，headers屬性

就我用到現在，很多表格要比上面提供的例子複雜的多。讓例子複雜一點，我會移去“Company”表頭，並且把第一列的資料移到表頭儲存格裡：

1. 
































Table 1: Company data

	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Table 1: Company data

	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

在這個表格裡，每一個資料儲存格都有兩個表頭。最簡單的方法讓那些非可視的瀏覽器理解這個表格，就是為每個表頭添加一個scope屬性。

1. 
































Table 1: Company data

	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Scope屬性同時定義了行的表頭和列的表頭：

• col: 列表頭
• row: 行表頭

在第一行的 加上值為col的scope屬性，聲明他們是下面資料儲存格的表頭。同樣的，給每行的開頭加上值為row的scope屬性聲明他們是右邊資料儲存格的表頭。

Scope屬性還有兩個值：

• colgroup: 定義列組（column group）的表頭資訊
• rowgroup: 定義行組（row group）的表頭資訊

一個列組是由標籤定義的。行組則是由、和定義的。稍後我將會詳細介紹它們。

如果你既想要保留“Company”表頭，而又想讓公司名字作為行表頭（row headers）顯示，你會怎麼做？那樣的話，應該使得包含公司名字的儲存格同時提供表頭和資料資訊。也就是說，標籤也應該加上scope屬性：

1. 
































Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

這樣的話可視化瀏覽器不會預設的把company name顯示為表頭。所以需要用CSS來修正一下，就剛才那個例子，我使用了下面的CSS：

1. td[scope] {

2. font-weight:bold;
3. }

要注意上面的規則使用了屬性選擇符，IE是不支援的。而通過添加一個class來樣式化表頭是個不錯的辦法。

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

另一個串連表格式資料儲存格和表頭的方法就是給每一個表頭添加一個唯一的ID。然後為下面的資料儲存格添加headers屬性，這個headers屬性值包含用空格分開的各個ID，這些ID代表的表頭各自關聯到該資料儲存格上。這樣做很複雜，只是當有超過兩個表頭的儲存格才用。在複雜的和不規則的表格中，scope屬性就力不從心了。

為了示範，我修改了一下表格，加上了公司僱員性別及人數：

1. 












































Table 1: Company data

	Employees		Founded
	Men	Women
ACME Inc	700	300	1947
XYZ Corp	1200	800	1973

Table 1: Company data

	Employees		Founded
	Men	Women
ACME Inc	700	300	1947
XYZ Corp	1200	800	1973

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

跨行和跨列

在以前用表格版面配置的年代，rowspan屬性和colspan屬性常被用來讓儲存格跨幾列或跨幾行，來布局那些經過整齊切割的映像。這兩個屬性現在還在用， 因為並沒有CSS來控制儲存格的跨行和跨列。仔細想想，其實是很有道理的：跨行和跨列示表格結構(structure)的一部分，而不是其表現(presentation)。

列和列組：和

HTML提供了和標籤來為相關的表格列分組。這樣就可以（在一些瀏覽器中）使用CSS來單獨的為列樣式化。列組也可以使用scope屬性來標明其表頭資訊。

這就是我要說的關於列和列組的全部。更多資訊參考“其他”部分。

行組： , , 和

表格的行可以分組為表頭組(), 表尾（或表注）組(), 然後是一個或多個表身() 。每一個行組必須包含一個或多個表格行。

如果一個表格包含，那麼它必須出現在和之前。而則必須出現在之前。如果沒有使用和，那麼標籤也可以不加（也不是非得不加，隨你喜歡了）。一個有行組的表格結構看起來如下：

1. 





4. … 更多表頭的行
   






7. … 更多表尾的行
   






10. … 第一個
的行







14. … 第二個
的行



16. … 更多的

使用行組有以下幾個原因：

• 這樣樣式化表頭、表尾和表身比較方便，而且獨立，不必要給每個標籤加樣式或class。
• 當列印比較長的表格的時候，一些瀏覽器（比如基於Mozilla的）會在每一頁的開頭重複表格頭和表尾的內容，這樣閱讀列印版本的表格就比較方便。
• 區分開表頭和表尾也可以使一些瀏覽器瀏覽表格的時候，只滾動表身。

僅為資料表格而寫

本文所寫的所有都是關於使用HTML表格來組織和表現資料。如果你還是想用表格來布局，那麼上文所述的都沒有意義而且用不到。沒有summary屬性、沒有表頭、沒有、什麼都沒有，沒有格式，陳舊的表格版面配置除了

,,和的描述也不是很深。對于格式化和樣式化還有border模型我也沒有深究，還缺少一個真正複雜的表格的例子。

想瞭解更多資訊，可以參考以下文章：

• Tables in HTML documents
• CSS formatting of tables
• Techniques for Accessible HTML Tables
• Building accessible websites: Tables and frames
• A table, s'il vous plaît



什麼都可以不要。另外還要承擔風險，即如何面對那些非可視的使用者代理程式（UA）。 優勢 看來要用HTML做一個有語義化的資料表格有很多工作。對於複雜的表格是這樣的。有時候基本上是不可能手工寫出來的。但是對於簡單的表格，那麼使用一個	加上scope屬性就可以了，又快又簡單。 非常明顯，語義化的表格對於使用螢幕助讀程式或其他輔助技術的瀏覽者非常有好處。讓那些巨大而複雜的表格“聽”起來很有意義是非常困難的，所以儘可能的使表格簡單。 另外對於使用可視化瀏覽器的設計者和使用者也是有好處的：一個語義化的表格有大量的介面可以利用CSS來樣式化，好的樣式可以讓表格更加易用。 其他 除了本文，還有更多關於資料表格內容。比如這裡就沒有提到axis屬性，並且對於