HTML標記語言－表格標籤_HTML/Xhtml_網頁製作

標準化設計解決方案- 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標記語法談起
Chapter2 邪惡的表格？
你知道嗎?不知何時開始,使用表格居然變成充滿罪惡的舉動了?的確,以web標準編寫網頁的最大迷思就是"不要再使用表格了,永遠不要!" 聽起來表格就和瘟疫一樣必須躲開,必須密封起來丟進滿是灰塵的櫃子裡,當成是網絡發展時代早期流傳下來的古董保存起來.
如此的厭惡從何而來呢? 或許一開始十分單純,至少擁有一個好的理由.很多人會理直氣壯的宣揚拋棄傳統的表格嵌套與補空gif圖片的佈局方式,改用靈活的結構化的css佈局方式的好處.我們可能就開始抽絲剝繭的去掉所有的表格,甚至開始頑固的堅持把所有的表格驅逐出去— 根本不分場合.
書中稍後我們會看到css佈局的方法和這樣做帶來的所有好處.但是現在我們還是先來看看如何在適當的場合—也就是標記資料清單的時候使用表格.我們會研究幾個簡單的方法是我們的資料清單變得更容易使用,更漂亮.
完全就是表格
在標記列表資料時,我們絕對沒有理由不去用表格標籤.但是等等,什麼才是列表資料?這邊有一些例子:    日曆    電子資料表    圖表 時間行程表
對這些例子以及許多其他情況來說,必須使用非常複雜嚴格的css特效才能讓資料看起來像表格,或許你能想像,用巧妙的css浮動,定位所有項目之後得到的是不相容的矛盾的結果,更別提拿掉css之後,準確讀出每筆資料大概會成為不可能完成的任務.事實上,我們不必畏懼表格—我們應該用他們設計之初的目標來使用它們.
適合所有人的表格
表格找來謾罵的原因之一是如果沒有小心使用的話會存在可用性缺陷.舉例來說:屏幕閱讀程序難以正確讀出內容,而小螢幕設備經常被用來佈局的表格擾亂,但是我們有一些簡單的方法增加列表數據表格的可用性.同時建立靈活的結構,方便未來以css設定樣式.
讓我們看看圖3- 1 中的簡單例子,這是美國棒球聯盟的聯盟記錄:

圖3-1:典型的資料表示例
也許對紅襪隊球迷來說這是非常鬱悶的統計資料,不過圖3-1的卻是列表資料的完美示範.它有三個表頭(year,opponent,season record(w-l)),跟著是四年份的資料.在表格上面的是表格標題,說明了表格的內容.
標記這個資料表格的方式十分直觀,我們或許會以這樣的代碼完成這個工作:

Boston Red Sox World Series Championships p>

Year	Opponent	Season Record (W-L)
1918	Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

這樣顯示的結果應該和圖3-1十分相似,但是,我們可以在這個基礎上加上一些改進.
首先,我們能用更加語義化的

標籤來存放"Boston Red Sox World Series Championships".標籤需要緊跟在起始標籤後面,通常用來存放表格的標題或表格資料的說明.
看上去,它更容易讓使用者看出表格的主題,同時也能夠幫助以其他方式得知網頁內容的人.
讓我們拿掉開頭的那個段落,並加入正確的

年份 td>
對手
賽季紀錄（W-L）

:

波士頓紅襪隊世界大賽冠軍

1918		75-51
1916	布魯克林羅賓斯	91-63 td>
1915 td>	費城費城人隊	101-50
;1912	紐約巨人	105-47

重要的是，標題必須快速瀏覽後面資料的主題，根據默認設置，大多數可視化器將標籤內的文字居中顯示在表格的最上面，當然，我們稍後可以使用css來修改預設設定的樣式－前面的技巧延伸中會討論這個問題。事實上，現在標題位於獨特的標籤內，正好讓我們以後的工作變得簡單又輕鬆。
                                #p#
加上摘要
另外，我們也崩潰了標籤加上summary屬性，進一步解釋了這個表格的目的和內容，摘要屬性對非視覺化瀏覽器非常重要，這可以幫助他們解說表格的內容。
以下為範例表格加上摘要屬性的程式碼：



年份
對手
賽季記錄( W-L)
















> ;

波士頓紅襪世界大賽冠軍

1918	芝加哥小熊 td>	75-51
1916	布魯克林羅賓斯	91-63
1915	費城費城人隊	101-50
1912	紐約巨人	105-47

表格的表頭
在建立資料表格時，善用表頭是件很重要的工作。標記重要單元格時，我們可以發揮標籤的作用，而不是在顯示上使用之類暗示用戶此單元格是重要的顯示效果標籤。標記段落標題一樣。的風格，以便於擺放在 內部的一般數據及進行區別。 。表摘要=「此表是一個圖表」所有波士頓紅襪隊世界大賽冠軍。第>年
Opponent
Season Record (W-L)


1918
Chicago Cubs
75-51


1916
Brooklyn Robins
91-63


1915
Philadelphia Phillies
101-50


1912
New York Giants
105-47


使用標籤來標記表頭單元格和圖3-1中的效果是一樣的,讓我們來看看為什麼這個方法比較好:
我們不必使用額外的顯示效果標籤讓表頭突出顯示在資料內容之外.
根據預設設定,大部分視覺化瀏覽器都會以粗體居中的效果展示 標籤中的內容.讓使用者輕易分辨出表頭和表格內容的區別.
由於它和 標籤是相對獨立的,因此我們能為表頭加上與資料內容不同的樣式.
使用表頭標籤的其他好處我們在接下去的章節中繼續討論.
                                #p#

表頭與資料的關係
我們可以利用headers屬性把表頭和對應的 中的資料關聯起來,使螢幕閱讀器能更容易為需要的人們組織表格內容.在使用了這個屬性之後,屏幕閱讀器將能更符合邏輯的讀出表格內容,而不是像平常一樣死板的從每列最左邊讀到最右邊.
我們繼續使用紅襪隊戰績表當作例子來示範使用方法.首先,我們需要為加上一個唯一的id,接著再為每個資料單元格加上headers屬性,對應正確的表頭.
為每個表頭加上id很簡單,就是這樣:



















Philadelphia Phillies

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
1918	Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	101-50
1912	New York Giants	105-47

我們為每個表頭id選擇簡短的有描述意義的名稱,接著我們再為每個資料單元格加上適當的headers屬性,讓內容匹配正確的表頭id:








1918

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

在為表頭和內容之間建立對應關係後,屏幕閱讀器可能會議這樣的方式讀出表格的每一行內容: "Year:1918,Opponent: Chicago Cubs,Season Record(W-L):75-51",比起從左到右讀出每格內容的方法來說,這樣就有意義多了.
讓每個 具有唯一的id還有其他的好處,我們可以使用這個辨別依據,設定特殊的css規則,在本章最後的技巧延伸終究會討論這個方法.
                                #p#

使用abbr屬性
在之前的範例中,或許你會覺得表頭中"Season Record (W-L)"用語音合成器來念實在太長了一些,此時,只要加上abbr屬性,我們就能縮短發音時的內容,同時又為可視化瀏覽器保留了 單元格中的原始文字.






tr>

Boston Red Sox World Series Championships

Year	Opponent	Season Record (W-L)
1918	Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

我們加上了abbr="Record" 後,螢幕閱讀器會讀出表頭使用簡短的版本後的"Record".
, 和
在這裡我還想提一下三個與表格相關的標籤.它們不僅能為表格結構提供更精確的語義,同時也為css提供額外的標籤,讓你在設計表格行的樣式時不用為標籤設計那麼多的class.
引用一段W3C在HTML4.01規格中對這些標籤的說明(http://www.php.cn/) :
引用:
表格行能夠以thead,tfoot和tbody標籤分成表頭,表尾以及數目不限的表格主體.這種分類法讓瀏覽器支持獨立捲動表格主體的功能.列印長表格時,表頭和表尾也能在包含表格資料的每一頁上重複出現.
因此,使用使用這種分類方式也能讓支持獨立表格主體的瀏覽器使用者更容易閱讀表格內容,特別是長表格.
與 必須出現在 之前,讓瀏覽器與其他設備能夠先載入這些內容,以這種表格行分類方式標記表格看起來是這樣的:



...table header content...




...table footer content...




...table data row...


...table data row...


...table data row...



你會發現,表頭和表尾資料以和 標籤包圍,放在表格數據行之前.
就像我之前所說的那樣,這些標籤不僅能為表格提供更精確的語意,還能提供css樣式錨點讓你為這些特定內容設定css規則,而不必為每個設計那麼多的class.
舉例來說,如果我們只想給資料區塊(以 標記)設定與其他區塊不同的背景色.那麼我們只需要寫這樣一段css就能達到目的:
tbody {
background-color: gray;
}
如果沒有tbody標籤的話,我們需要為每個想要加上灰色背景的標籤添加class屬性.有意義的標記方式經常能使之後用css設定樣式的工作變得十分輕鬆.這就是好例子.
                                #p#

表格邪惡嗎?
我想,如果我們根據表格標籤設計之初的目的好好使用的話,那麼答案就肯定是"不!".濫用表格創建複雜嵌套的佈局的行為理所當然會遭到譴責,但是表格的確會給資料區塊提供它需要的良好的結構.
我們不能在整本書裡都敘述創建完美表格所需要的各種技巧,因此就此打住,希望你已經開始知道如何創建簡單的又具有可用性的方便css修飾的簡單表格.
談到樣式,讓我們用幾種不同的css技巧修飾一下之前的示例.
技巧延伸
與之前章節一樣,我們用靈活的語義化的結構化的標記為基礎,然後用css給他加上一些樣式
首先,我們先來看看簡單的邊框技巧,在範例上建立單線邊框,然後我們再為表格標題和表頭加上獨特的樣式
建立邊框
已經對border預設屬性的3維效果感到厭倦了麼?我也是.一般來說,為table標籤加上border="1"就會與圖3-1的效果類似,當然你也能換個方法,這邊有一個用css做出漂亮整潔邊框的訣竅.首先,我們給每個 單元格兩側(右側和底部)加上一像素的邊框:
th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
只加上兩側邊框,是建立各處邊框等寬又同時讓大部分流行的瀏覽器能夠正確顯示的關鍵所在.如果我在四周都加上邊框,那麼邊框的頂部和左側會在單元格排列時造成重疊,在稍後的示例中,我會給出一種只用一條border規則就達成小童效果的方法.
你會發現圖3-2中的整個表格只缺少了最頂部和最左側的邊線,為了補齊邊框,我們給元素加上樣式相同的border -top和border-left屬性
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

圖3-2:為加加拉上兩側邊線的表格範例

圖3-3 補齊邊線後的表格範例
                                #p#

去掉間隙
現在我們已經有了個完整的表格了,但是邊框之間的間隔是怎麼回事?不幸的是,由於大多數瀏覽器會預設設定一點外補丁,因此就會露出這些令人討厭的間隙了.
我們能做的是為表格元素加上border-collapse屬性來去掉這些間隙,得到我們想要的樣式.
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
} border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
在為border-collapse加上collapse屬性後,

在為border-collapse加上我們就能看到精確的單線邊框樣式了,如圖3-4

圖3-4:使用了border-collapse屬性後的表格範例不支援IE for Mac的版本

除了Internet Explorer for Mac之外,其他的瀏覽器都支援把css簡寫成這樣:
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999; }
要用哪一種方法,這當然由你來決定了,現在仍然有一些人再使用IE for Mac,而使用這個替代方法的話,會讓他們看到一些邊線的重複,如果你並不在意這件事情,那就用簡化的辦法吧.嚴格來說,這只是個顯示上的問題,表格功能絲毫不受影響.
由於我無法棄Mac狂熱者於不顧(任何稱職的網頁設計師都應該這樣),因此再往後的範例中,我還是會用IE for Mac也能正確顯示的版本.
擴大空間
現在我們手上有了一個完美的表格,不過它看起來有點局促...讓我們為手邊的th,td規則加上一點內補丁,給它們呼吸的空間(圖3-5)
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
th, td {
padding: 10px> border : 1px solid #999;
border-bottom: 1px solid #999;
}

圖3-5:加上10像素內補丁的表格範例

圖3-5:加上10像素內補丁的表格範例
你知道嗎?如果用單一數值設定內補丁的話(比如之前的例子的10px),就需要給元素的四邊都加上相同的設定值,你也可以按照順時針順序(上右下左)分別指定每一邊的設定值.如果你把內部定設定為10px 5px 2px 10px的話,就會在頂部加上10px的內補丁,右側加上5px的內補丁,底部加上2px的內補丁,左側加上10px的內補丁.
另一條捷徑:如果上下的設定值相同,左右的設定值也相同的話,你就只需要分別設定一次就可以了,如果設定了padding:10px 5px的話,就會在上下部加上10px的內補丁,在左右側加上5px的內補丁.

圖3-6:順時針設定內補丁和外邊界的順序
                                #p#
調整表頭的顯示效果

我們可以輕鬆的給錶頭加上背景色，選用不同的字體，讓表頭更加的明顯，由於我們是使用了

標籤而不是直接在行內將內容設為粗體,因此我們不必加上任何其他的標籤,就能直接為表頭內容設定樣式. 我們在標題下面也加上一點內補丁,同時還用不同的字體,顏色(當然是紅色)以突出標題內容(圖3-7) table { border-top: 1px solid #999; border-left: 1px solid #999; } caption { font-family: Arial, sans-serif; color: #993333; padding-bottom: 6px; > } th, td { padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; } } } } } } } } } } } font-family: Verdana, sans-serif; background: #ccc; } 圖3-7:加上樣式的標題和	為表頭加上背景圖片 剛才我們為表格裡的	元素加上了灰色背景,但是我們其實可以更進一步,用背景圖平鋪在格子裡來作出漂亮的效果,舉例來說,我們能用細緻的灰色條紋模擬出許多Mac OS X中的窗口樣式 小圖片 首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個小圖片,在這個例子中,我們要製作一個2像素灰色和2像素白色交替出現的效果,因此圖片只需要4像素高,寬度多款都無所謂,因為它會在	里平鋪開來,做出我們想要的條紋效果.為了節省頻寬,我們只做1像素寬(圖3-8) 圖3-8:1X4的像素條紋圖片(放大後) CSS 沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛製作好的小圖片路徑,除非另外制定,否則根據預設值,背景圖會自動超每個方向平鋪. table { border-top: 1px solid #999; border-left: 1px solid #999; } } caption { font-family: Arial, sans-serif; color: #993333; padding-bottom: 6px; }padth, 蒂td> : 10px; border-right: 1px solid #999; border-bottom: 1px solid #999; }th { font-family: Verdana, s-ans- 🎜> background: url(th_stripe.gif); }圖3 -9是套用這個樣式後的表格,表頭部分分線了條紋背景,要實驗其他的平鋪背景圖也很方便,你可以試試看怎樣才能為表頭或資料做出最好看的效果,好好享受這個實驗的過程吧. 圖3-9:在表頭使用平鋪背景的範例                                 #p# 為ID指定圖示 記得本章開始的時候我們為表格裡的每一個	加上唯一的ID嗎?那時我們把這些id與資料清單中的headers屬性相符起來,幫助非視覺化瀏覽器的使用者了解表格的內容,現在我們能在另一個地方發揮這個id的功能了,那就是為每個	指定不同的圖示. 圖示路徑會完全記錄在css檔案中,讓你能夠在網站重構,更新時輕易的替換,完全不必修改標籤部分. 圖示 我用photoshop做了三個獨特的圖示,分別用在範例中每個表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個圖示: 圖3- 10hotoshop製作的三個表頭圖示 CSS 加上css並不困難,因為我們為每個	都制定了獨特的id,因此我們能直接用background屬性來指定正確的圖示. table { border-top: 1px solid #999; border-left: 1px solid #999; } caption { font-family: Arial, sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; right: 1px solid #999; border-bottom: 1px solid #999; } th { font-family: Verdana, sans-serif; } } { padding-left: 26px; background: #ccc url(icon_year.gif) no-repeat 10px 50%; } #opponent { padding-left: 26padx; 🎜> background: #ccc url(icon_opp.gif) no-repeat 10px 50%; } #record { padding-left: 26px; background: #ccc url(icon_rec. ) no-repeat 10px 50%; } 你應該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規則,並把它放到每個表頭的圖示名稱旁邊,這會使得我們的圖示"坐"在我們指定的灰色背景上面,我們也在每個表頭內容的左邊留夠圖示的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果: 圖3-11:為每個	制定獨特圖標的效果 使用簡寫語法有明顯的優點,然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應該先取消掉先前在	中以background定義的背景色. 組合規則,簡化內容 能夠達到相同功能的另一種寫法,是把每個表頭裡反覆出現的規則(在這個例子中是背景圖片,內補丁和位置)拿出來寫在	定義一次就好了(因為它們的設定在每個	中的確都一樣),然後只在#year,#opponent,#record定義內保留各自不同的設定值(也就是圖片路徑) table { border-top: 1px solid #999; border-left: 1px solid #999; }caption { font-family: Arial, sans-serif; color: #99333: #993 ; padding-bottom: 6px; } th, td { padding: 10px; border-right: 1px solid #999; borderorder-botsol:1px d 999; } th { font-family: Verdana, sans-serif; padding-left: 26px; background-color: #ccc; background-eat: no-repeat; background-position: 10px 50%; } #year { background-image: url(icon_year.gif); } #opponent { background-image: url(icon_opp.gif); } #record { background: url(icon_rec.gif); } 這樣稍微簡潔一些了吧?藉著整合相同規則,我們能夠省下每次重複定義修改的時間和精力,以這個例子來說,看起來只差六個,半打而已,但是對大一些的樣式表來說,節省的量就很可觀了. 總結 在本章,我們不僅發現了表格並不邪惡,同時還深入了解表格之後,我們發現,他們很適合用來標記例表數據,而且仍然易於使用 我們更發現,只要加上一些樣式,就能控制列表數據的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.