|
上文：Chapter 2 標(biāo)題
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語(yǔ)言和樣式手冊(cè)
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語(yǔ)法談起
Chapter 3 邪惡的表格？
你知道嗎?不知何時(shí)開(kāi)始,使用表格居然變成充滿罪惡的舉動(dòng)了?的確,以web標(biāo)準(zhǔn)編寫網(wǎng)頁(yè)的最大迷思就是"不要再使用表格了,永遠(yuǎn)不要!" 聽(tīng)起來(lái)表格就和瘟疫一樣必須躲開(kāi),必須密封起來(lái)丟進(jìn)滿是灰塵的柜子里,當(dāng)成是網(wǎng)絡(luò)發(fā)展時(shí)代早期流傳下來(lái)的古董保存起來(lái).
如此的厭惡從何而來(lái)呢? 或許一開(kāi)始十分單純,至少擁有一個(gè)好的理由.很多人會(huì)理直氣壯的宣揚(yáng)拋棄傳統(tǒng)的表格嵌套與補(bǔ)空gif圖片的布局方式,改用靈活的結(jié)構(gòu)化的css布局方式的好處.我們可能就開(kāi)始抽絲剝繭的去掉所有的表格,甚至開(kāi)始頑固的堅(jiān)持把所有的表格驅(qū)逐出去 — 根本不分場(chǎng)合.
書中稍后我們會(huì)看到css布局的方法和這樣做帶來(lái)的所有好處.但是現(xiàn)在我們還是先來(lái)看看如何在適當(dāng)?shù)膱?chǎng)合—也就是標(biāo)記數(shù)據(jù)列表的時(shí)候使用表格.我們會(huì)研究幾個(gè)簡(jiǎn)單的方法是我們的數(shù)據(jù)列表變得更容易使用,更漂亮.
完全就是表格
在標(biāo)記列表數(shù)據(jù)時(shí),我們絕對(duì)沒(méi)有理由不去用表格標(biāo)簽.但是等等,什么才是列表數(shù)據(jù)?這邊有一些例子:
- 日歷
- 電子數(shù)據(jù)表
- 圖表
- 時(shí)間行程表
對(duì)這些例子以及許多其他情況來(lái)說(shuō),必須使用非常復(fù)雜嚴(yán)格的css特效才能讓資料看起來(lái)像表格,或許你能想象,用巧妙的css浮動(dòng),定位所有項(xiàng)目之后得到的是不兼容的矛盾的結(jié)果,更別提拿掉css之后,準(zhǔn)確讀出每筆資料大概會(huì)成為不可能完成的任務(wù).事實(shí)上,我們不必畏懼表格—我們應(yīng)該用他們?cè)O(shè)計(jì)之初的目標(biāo)來(lái)使用它們.
適合所有人的表格
表格找來(lái)謾罵的原因之一是如果沒(méi)有小心使用的話會(huì)存在可用性缺陷.舉例來(lái)說(shuō):屏幕閱讀程序難以正確讀出內(nèi)容,而小屏幕設(shè)備經(jīng)常被用來(lái)布局的表格擾亂,但是我們有一些簡(jiǎn)單的方法增加列表數(shù)據(jù)表格的可用性.同時(shí)建立靈活的結(jié)構(gòu),方便未來(lái)以css設(shè)定樣式.
讓我們看看 圖3-1 中的簡(jiǎn)單示例,這是美國(guó)棒球聯(lián)賽的聯(lián)盟記錄:
圖 3-1:典型的資料表示例
也許對(duì)紅襪隊(duì)球迷來(lái)說(shuō)這是非常郁悶的統(tǒng)計(jì)資料,不過(guò)圖3-1的卻是列表資料的完美示范.它有三個(gè)表頭(year,opponent,season record(w-l)),跟著是四年份的資料.在表格上面的是表格標(biāo)題,說(shuō)明了表格的內(nèi)容.
標(biāo)記這個(gè)資料表格的方式十分直觀,我們或許會(huì)以這樣的代碼完成這個(gè)工作:
<p align="center">Boston Red Sox World Series Championships</p>
<table>
<tr>
<td align="center"><b>Year</b></td>
<td align="center"><b>Opponent</b></td>
<td align="center"><b>Season Record (W-L)</b></td>
</tr>
<tr>
<td>1918</td>
<td>Chicago Cubs</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Brooklyn Robins</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Philadelphia Phillies</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>New York Giants</td>
<td>105-47</td>
</tr>
</table>
這樣顯示的結(jié)果應(yīng)該和圖3-1十分相似,但是,我們可以在這個(gè)基礎(chǔ)上加上一些改進(jìn).
首先,我們能用更加語(yǔ)義化的<caption>標(biāo)簽來(lái)存放"Boston Red Sox World Series Championships".<caption>標(biāo)簽需要緊跟在<table>起始標(biāo)簽后面,通常用來(lái)存放表格的標(biāo)題或者表格資料的說(shuō)明.
看上去,它更容易讓使用者看出表格的主題,同時(shí)也能夠幫助以其他方式得知網(wǎng)頁(yè)內(nèi)容的人.
讓我們拿掉開(kāi)頭的那個(gè)段落,并加入正確的<caption>:
<table>
<caption>Boston Red Sox World Series Championships</caption>
<tr>
<td align="center"><b>Year</b></td>
<td align="center"><b>Opponent</b></td>
<td align="center"><b>Season Record (W-L)</b></td>
</tr>
<tr>
<td>1918</td>
<td>Chicago Cubs</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Brooklyn Robins</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Philadelphia Phillies</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>New York Giants</td>
<td>105-47</td>
</tr>
</table>
重要的是,標(biāo)題必須快速傳達(dá)后面資料的主題,根據(jù)默認(rèn)設(shè)置,大多數(shù)可視化瀏覽器將<caption>標(biāo)簽內(nèi)的文字居中顯示在表格的最上面,當(dāng)然,我們稍后可以使用css來(lái)改變默認(rèn)設(shè)置的樣式 — 本章的技巧延伸中會(huì)討論這個(gè)問(wèn)題.事實(shí)上,現(xiàn)在標(biāo)題位于獨(dú)特的標(biāo)簽內(nèi),正好讓我們之后的修改工作變得輕松簡(jiǎn)單.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 標(biāo)記語(yǔ)言——邪惡的表格? [1]
第 2 頁(yè) 
