HTML標(biāo)記語(yǔ)言——表格標(biāo)記

2019-10-26 17:21:40

字體：大中小

供稿：網(wǎng)友

點(diǎn)擊這里返回武林站長(zhǎng)站　HTML教程　欄目．
上文：標(biāo)記語(yǔ)言——標(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ǔ)法談起
Chapter2 邪惡的表格？
你知道嗎?不知何時(shí)開(kāi)始,使用表格居然變成充滿(mǎn)罪惡的舉動(dòng)了?的確,以web標(biāo)準(zhǔn)編寫(xiě)網(wǎng)頁(yè)的最大迷思就是"不要再使用表格了,永遠(yuǎn)不要!" 聽(tīng)起來(lái)表格就和瘟疫一樣必須躲開(kāi),必須密封起來(lái)丟進(jìn)滿(mǎ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)合.
書(shū)中稍后我們會(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à)會(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>

上一篇：XHTML入門(mén)學(xué)習(xí)教程:表單標(biāo)簽

下一篇：網(wǎng)頁(yè)表格分割線(xiàn)去除方法