標準化設計解決方案 - 標記語言和樣式手冊

Web Standards Solutions The Markup and Style Handbook

Part 1: Get Down With Markup 從標記語法談起

Chapter2 邪惡的表格？

你知道嗎?不知何時開始,使用表格居然變成充滿罪惡的舉動了?的確,以web標準編寫網(wǎng)頁的最大迷思就是"不要再使用表格了,永遠不要!" 聽起來表格就和瘟疫一樣必須躲開,必須密封起來丟進滿是灰塵的柜子里,當成是網(wǎng)絡發(fā)展時代早期流傳下來的古董保存起來.

如此的厭惡從何而來呢? 或許一開始十分單純,至少擁有一個好的理由.很多人會理直氣壯的宣揚拋棄傳統(tǒng)的表格嵌套與補空gif圖片的布局方式,改用靈活的結構化的css布局方式的好處.我們可能就開始抽絲剝繭的去掉所有的表格,甚至開始頑固的堅持把所有的表格驅逐出去 — 根本不分場合.

書中稍后我們會看到css布局的方法和這樣做帶來的所有好處.但是現(xiàn)在我們還是先來看看如何在適當?shù)膱龊稀簿褪菢擞洈?shù)據(jù)列表的時候使用表格.我們會研究幾個簡單的方法是我們的數(shù)據(jù)列表變得更容易使用,更漂亮.

完全就是表格

在標記列表數(shù)據(jù)時,我們絕對沒有理由不去用表格標簽.但是等等,什么才是列表數(shù)據(jù)?這邊有一些例子:

日歷

電子數(shù)據(jù)表

圖表

時間行程表

對這些例子以及許多其他情況來說,必須使用非常復雜嚴格的css特效才能讓資料看起來像表格,或許你能想象,用巧妙的css浮動,定位所有項目之后得到的是不兼容的矛盾的結果,更別提拿掉css之后,準確讀出每筆資料大概會成為不可能完成的任務.事實上,我們不必畏懼表格—我們應該用他們設計之初的目標來使用它們.

適合所有人的表格

表格找來謾罵的原因之一是如果沒有小心使用的話會存在可用性缺陷.舉例來說:屏幕閱讀程序難以正確讀出內(nèi)容,而小屏幕設備經(jīng)常被用來布局的表格擾亂,但是我們有一些簡單的方法增加列表數(shù)據(jù)表格的可用性.同時建立靈活的結構,方便未來以css設定樣式.

讓我們看看 圖3-1 中的簡單示例,這是美國棒球聯(lián)賽的聯(lián)盟記錄:

圖 3-1:典型的資料表示例

也許對紅襪隊球迷來說這是非常郁悶的統(tǒng)計資料,不過圖3-1的卻是列表資料的完美示范.它有三個表頭(year,opponent,season record(w-l)),跟著是四年份的資料.在表格上面的是表格標題,說明了表格的內(nèi)容.

標記這個資料表格的方式十分直觀,我們或許會以這樣的代碼完成這個工作:

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

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

首先,我們能用更加語義化的

標簽來存放"Boston Red Sox World Series Championships".標簽需要緊跟在

看上去,它更容易讓使用者看出表格的主題,同時也能夠幫助以其他方式得知網(wǎng)頁內(nèi)容的人.

讓我們拿掉開頭的那個段落,并加入正確的

: 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

重要的是,標題必須快速傳達后面資料的主題,根據(jù)默認設置,大多數(shù)可視化瀏覽器將

標簽內(nèi)的文字居中顯示在表格的最上面,當然,我們稍后可以使用css來改變默認設置的樣式 — 本章的技巧延伸中會討論這個問題.事實上,現(xiàn)在標題位于獨特的標簽內(nèi),正好讓我們之后的修改工作變得輕松簡單.

#p#

加上摘要

另外,我們也能為

以下是為示例表格加上摘要屬性的代碼:

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

表格的表頭

在建立數(shù)據(jù)表格時,善用表頭是件很重要的工作.在標記重要單元格時,我們可以發(fā)揮

標簽的作用,而不是使用 之類在顯示上暗示用戶這個單元格是重要的的顯示效果標簽.就像我們在第二章中使用標題標簽標記段落標題一樣.

可視化瀏覽器或許會以粗體居中的效果顯示

標簽中的內(nèi)容,但是我們依然可以用標簽的獨特性,稍后再給這些重要的內(nèi)容加上不同的樣式,以便于存放在內(nèi)的一般資料及進行區(qū)別.

除顯示效果的優(yōu)勢外,使用

標簽也能幫助非可視化瀏覽器 — 這部分我們稍后進行深入討論.

示例表格中的表頭是最上面的那一行: Year,Opponent和Season Record(W-L).我們來把剛才的顯示效果標簽替換成正確的表頭標簽:

Boston Red Sox World Series Championships YearOpponentSeason 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中的效果是一樣的,讓我們來看看為什么這個方法比較好:

我們不必使用額外的顯示效果標簽讓表頭突出顯示在資料內(nèi)容之外.

根據(jù)默認設置,大部分可視化瀏覽器都會以粗體居中的效果展示

標簽中的內(nèi)容.讓使用者輕易分辨出表頭和表格內(nèi)容的區(qū)別.

由于它和

標簽是相對獨立的,因此我們能為表頭加上與資料內(nèi)容不同的樣式.

使用表頭標簽的其他好處我們在接下去的章節(jié)中繼續(xù)討論.

#p#

表頭與數(shù)據(jù)的關系

我們可以利用headers屬性把表頭和對應的

中的數(shù)據(jù)關聯(lián)起來,使屏幕閱讀器能更容易為需要的人們組織表格內(nèi)容.在使用了這個屬性之后,屏幕閱讀器將能更符合邏輯的讀出表格內(nèi)容,而不是像平常一樣死板的從每列最左邊讀到最右邊.

我們繼續(xù)使用紅襪隊戰(zhàn)績表當作例子來示范使用方法.首先,我們需要為加上一個唯一的id,接著再為每個資料單元格加上headers屬性,對應正確的表頭.

為每個表頭加上id很簡單,就是這樣:

Boston Red Sox World Series Championships YearOpponentSeason Record (W-L)

1918	Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

我們?yōu)槊總€表頭id選擇簡短的有描述意義的名稱,接著我們再為每個資料單元格加上適當?shù)膆eaders屬性,讓內(nèi)容匹配正確的表頭id:

Boston Red Sox World Series Championships YearOpponentSeason Record (W-L)

1918	Chicago Cubs	75-51
1916	Brooklyn Robins	91-63
1915	Philadelphia Phillies	101-50
1912	New York Giants	105-47

在為表頭和內(nèi)容之間建立對應關系后,屏幕閱讀器可能會議這樣的方式讀出表格的每一行內(nèi)容: "Year:1918,Opponent:Chicago Cubs,Season Record(W-L):75-51",比起從左到右讀出每格內(nèi)容的方法來說,這樣就有意義多了.

讓每個

具有唯一的id還有其他的好處,我們可以使用這個辨別依據(jù),設定特殊的css規(guī)則,在本章最后的技巧延伸終究會討論這個方法.

#p#

使用abbr屬性

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

單元格中的原始文字. Boston Red Sox World Series Championships YearOpponentSeason 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規(guī)格中對這些標簽的說明(http://www.php.cn/):

引用:表格行能夠以thead,tfoot和tbody標簽分成表頭,表尾以及數(shù)目不限的表格主體.這種分類法讓瀏覽器支持獨立卷動表格主體的功能.打印長表格時,表頭和表尾也能在包含表格資料的每一頁上重復出現(xiàn).

因此,使用使用這種分類方式也能讓支持獨立表格主體的瀏覽器使用者更容易閱讀表格內(nèi)容,特別是長表格.

與

必須出現(xiàn)在之前,讓瀏覽器與其他設備能夠先載入這些內(nèi)容,以這種表格行分類方式標記表格看起來是這樣的:

...table header content...

...table footer content...

...table data row...

...table data row...

...table data row...

你會發(fā)現(xiàn),表頭和表尾資料以和

標簽包圍,放在表格數(shù)據(jù)行之前.

就像我之前所說的那樣,這些標簽不僅能為表格提供更精確的語義,還能給css提供樣式錨點讓你為這些特定內(nèi)容設置css規(guī)則,而不必為每個

設計那么多的class.

舉例來說,如果我們只想給數(shù)據(jù)區(qū)塊(以

標記)設定與其他區(qū)塊不同的背景色.那么我們只需要寫這樣一段css就能達到目的:

tbody {

background-color: gray;

}

如果沒有tbody標簽的話,我們需要為每個想要加上灰色背景的

標簽添加class屬性.有意義的標記方式經(jīng)常能使之后用css設定樣式的工作變得十分輕松.這就是個好例子.

#p#

表格邪惡嗎?

我想,如果我們根據(jù)表格標簽設計之初的目的好好使用的話,那么答案就肯定是"不!".濫用表格創(chuàng)建復雜嵌套的布局的行為理所當然會遭到譴責,但是表格的確會給資料區(qū)塊提供它需要的良好的結構.

我們不能在整本書里都敘述創(chuàng)建完美表格所需要的各種技巧,因此就此打住,希望你已經(jīng)開始知道如何創(chuàng)建簡單的又具有可用性的方便css修飾的簡單表格.

談到樣式,讓我們用幾種不同的css技巧修飾一下之前的示例.

技巧延伸

與之前章節(jié)一樣,我們用靈活的語義化的結構化的標記為基礎,然后用css給他加上一些樣式

首先,我們先來看看簡單的邊框技巧,在示例上創(chuàng)建單線邊框,然后我們再為表格標題和表頭加上獨特的樣式

建立邊框

已經(jīng)對border默認屬性的3維效果感到厭倦了么?我也是.一般來說,為table標簽加上border="1"就會與圖3-1的效果類似,當然你也能換個方法,這邊有一個用css做出漂亮整潔邊框的訣竅.首先,我們給每個

單元格兩側(右側和底部)加上一像素的邊框:

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

只加上兩側邊框,是建立各處邊框等寬又同時讓大部分流行的瀏覽器能夠正確顯示的關鍵所在.如果我在四周都加上邊框,那么邊框的頂部和左側會在單元格排列時造成重疊,在稍后的示例中,我會給出一種只用一條border規(guī)則就達成小童效果的方法.

你會發(fā)現(xiàn)圖3-2中的整個表格只缺少了最頂部和最左側的邊線,為了補齊邊框,我們給

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:為th和td加上兩側邊線的表格示例

圖3-3 補齊邊線后的表格示例

#p#

去掉間隙

現(xiàn)在我們已經(jīng)有了個完整的表格了,但是邊框之間的間隔是怎么回事?不幸的是,由于大多數(shù)瀏覽器會默認設置一點外補丁,因此就會露出這些令人討厭的間隙了.

我們能做的是為表格元素加上border-collapse屬性來去掉這些間隙,得到我們想要的樣式.

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

在為border-collapse加上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;

}

要用哪一種方法,這當然由你來決定了,現(xiàn)在仍然有一些人再使用IE for Mac,而使用這個替代方法的話,會讓他們看到一些邊線的重復,如果你并不在意這件事情,那就使用簡化的辦法吧.嚴格來說,這只是個顯示上的問題,表格功能絲毫不受影響.

由于我無法棄Mac狂熱者于不顧(任何稱職的網(wǎng)頁設計師都應該這樣),因此再往后的示例中,我還是會用IE for Mac也能正確顯示的版本.

擴大空間

現(xiàn)在我們手上有了一個完美的表格,不過它看上去有點局促...讓我們?yōu)槭诌叺膖h,td規(guī)則加上一點內(nèi)補丁,給它們呼吸的空間(圖3-5)

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-collapse: collapse;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

圖3-5:加上10像素內(nèi)補丁的表格示例

你知道嗎?如果用單一數(shù)值設定內(nèi)補丁的話(比如之前的例子的10px),就需要給元素的四邊都加上相同的設定值,你也可以按照順時針順序(上右下左)分別指定每一邊的設定值.如果你把內(nèi)部定設定為10px 5px 2px 10px的話,就會在頂部加上10px的內(nèi)補丁,右側加上5px的內(nèi)補丁,底部加上2px的內(nèi)補丁,左側加上10px的內(nèi)補丁.

另一條捷徑:如果上下的設定值相同,左右的設定值也相同的話,你就只需要分別設定一次就可以了,如果設定了padding:10px 5px的話,就會在上下部加上10px的內(nèi)補丁,在左右側加上5px的內(nèi)補丁.

圖3-6:順時針設定內(nèi)補丁和外邊界的順序

#p#

調整表頭的顯示效果

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

標簽而不是直接在行內(nèi)將內(nèi)容設為粗體,因此我們不必加上任何其他的標簽,就能直接為表頭內(nèi)容設定樣式.

我們在標題下面也加上一點內(nèi)補丁,同時還用不同的字體,顏色(當然是紅色)以突出標題內(nèi)容(圖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;

}

th {

font-family: Verdana, sans-serif;

background: #ccc;

}

圖3-7:加上樣式的標題和

為表頭加上背景圖片

剛才我們?yōu)楸砀窭锏?/p>元素加上了灰色背景,但是我們其實可以更進一步,用背景圖平鋪在格子里來作出漂亮的效果,舉例來說,我們能用細致的灰色條紋模擬出許多Mac OS X中的窗口樣式

小圖片

首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個小圖片,在這個例子中,我們要制作一個2像素灰色和2像素白色交替出現(xiàn)的效果,因此圖片只需要4像素高,寬度多款都無所謂,因為它會在

里平鋪開來,做出我們想要的條紋效果.為了節(jié)省帶寬,我們只做1像素寬(圖3-8)

圖3-8:1X4的像素條紋圖片(放大后)

CSS

沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛制作好的小圖片路徑,除非另外制定,否則根據(jù)默認設置,背景圖會自動超每個方向平鋪.

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;

}

th {

font-family: Verdana, sans-serif;

background: url(th_stripe.gif);

}

圖3 -9是套用這個樣式后的表格,表頭部分分線了條紋背景,要實驗其他的平鋪背景圖也很方便,你可以試試怎樣才能為表頭或資料做出最好看的效果,好好享受這個實驗的過程吧.

圖3-9:在表頭使用平鋪背景的示例

#p#

為ID指定圖標

記得本章開始的時候我們?yōu)楸砀窭锏拿恳粋€

加上唯一的ID嗎?那時我們把這些id與數(shù)據(jù)列表中的headers屬性匹配起來,幫助非可視化瀏覽器的使用者了解表格的內(nèi)容,現(xiàn)在我們能在另一個地方發(fā)揮這個id的功能了,那就是為每個指定不同的圖標.

圖標路徑會完全記錄在css文件中,讓你能夠在網(wǎng)站重構,更新時輕易的替換,完全不必修改標簽部分.

圖標

我用photoshop做了三個獨特的圖標,分別用在示例中每個表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個圖標:

圖3-10hotoshop制作的三個表頭圖標

CSS

加上css并不困難,因為我們?yōu)槊總€

都制定了獨特的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;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

}

#year {

padding-left: 26px;

background: #ccc url(icon_year.gif) no-repeat 10px 50%;

}

#opponent {

padding-left: 26px;

background: #ccc url(icon_opp.gif) no-repeat 10px 50%;

}

#record {

padding-left: 26px;

background: #ccc url(icon_rec.gif) no-repeat 10px 50%;

}

你應該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規(guī)則,并把它放到每個表頭的圖標名稱旁邊,這會使得我們的圖標"坐"在我們指定的灰色背景上面,我們也在每個表頭內(nèi)容的左邊留夠圖標的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果:

圖3-11:為每個

制定獨特圖標的效果

使用簡寫語法有明顯的優(yōu)點,然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應該先取消掉先前在

中以background定義的背景色.

組合規(guī)則,簡化內(nèi)容

能夠達到相同功能的另一種寫法,是把每個表頭里反復出現(xiàn)的規(guī)則(在這個例子中是背景圖片,內(nèi)補丁和位置)拿出來寫在

定義一次就好了(因為它們的設定在每個中的確都一樣),然后只在#year,#opponent,#record定義內(nèi)保留各自不同的設定值(也就是圖片路徑)

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;

}

th {

font-family: Verdana, sans-serif;

padding-left: 26px;

background-color: #ccc;

background-repeat: 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);

}

這樣稍微簡潔一些了吧?借著整合相同規(guī)則,我們能夠省下每次重復定義修改的時間和精力,以這個例子來說,看起來只差六個,半打而已,但是對大一些的樣式表來說,節(jié)省的量就很可觀了.

總結

在本章,我們不僅發(fā)現(xiàn)了表格并不邪惡,同時還深入了解表格之后,我們發(fā)現(xiàn),他們很適合用來標記例表數(shù)據(jù),而且仍然易于使用

我們更發(fā)現(xiàn),只要加上一些樣式,就能控制列表數(shù)據(jù)的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.

本文原創(chuàng)發(fā)布php中文網(wǎng)，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的php中表格标记是,HTML标记语言——表格标记_HTML/Xhtml_网页制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。