php中表格标记是,HTML标记语言——表格标记_HTML/Xhtml_网页制作
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語言和樣式手冊(cè)
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語法談起
Chapter2 邪惡的表格？
你知道嗎?不知何時(shí)開始,使用表格居然變成充滿罪惡的舉動(dòng)了?的確,以web標(biāo)準(zhǔn)編寫網(wǎng)頁的最大迷思就是"不要再使用表格了,永遠(yuǎn)不要!" 聽起來表格就和瘟疫一樣必須躲開,必須密封起來丟進(jìn)滿是灰塵的柜子里,當(dāng)成是網(wǎng)絡(luò)發(fā)展時(shí)代早期流傳下來的古董保存起來.
如此的厭惡從何而來呢? 或許一開始十分單純,至少擁有一個(gè)好的理由.很多人會(huì)理直氣壯的宣揚(yáng)拋棄傳統(tǒng)的表格嵌套與補(bǔ)空gif圖片的布局方式,改用靈活的結(jié)構(gòu)化的css布局方式的好處.我們可能就開始抽絲剝繭的去掉所有的表格,甚至開始頑固的堅(jiān)持把所有的表格驅(qū)逐出去 — 根本不分場(chǎng)合.
書中稍后我們會(huì)看到css布局的方法和這樣做帶來的所有好處.但是現(xiàn)在我們還是先來看看如何在適當(dāng)?shù)膱?chǎng)合—也就是標(biāo)記數(shù)據(jù)列表的時(shí)候使用表格.我們會(huì)研究幾個(gè)簡單的方法是我們的數(shù)據(jù)列表變得更容易使用,更漂亮.
完全就是表格
在標(biāo)記列表數(shù)據(jù)時(shí),我們絕對(duì)沒有理由不去用表格標(biāo)簽.但是等等,什么才是列表數(shù)據(jù)?這邊有一些例子:
日歷
電子數(shù)據(jù)表
圖表
時(shí)間行程表
對(duì)這些例子以及許多其他情況來說,必須使用非常復(fù)雜嚴(yán)格的css特效才能讓資料看起來像表格,或許你能想象,用巧妙的css浮動(dòng),定位所有項(xiàng)目之后得到的是不兼容的矛盾的結(jié)果,更別提拿掉css之后,準(zhǔn)確讀出每筆資料大概會(huì)成為不可能完成的任務(wù).事實(shí)上,我們不必畏懼表格—我們應(yīng)該用他們?cè)O(shè)計(jì)之初的目標(biāo)來使用它們.
適合所有人的表格
表格找來謾罵的原因之一是如果沒有小心使用的話會(huì)存在可用性缺陷.舉例來說:屏幕閱讀程序難以正確讀出內(nèi)容,而小屏幕設(shè)備經(jīng)常被用來布局的表格擾亂,但是我們有一些簡單的方法增加列表數(shù)據(jù)表格的可用性.同時(shí)建立靈活的結(jié)構(gòu),方便未來以css設(shè)定樣式.
讓我們看看 圖3-1 中的簡單示例,這是美國棒球聯(lián)賽的聯(lián)盟記錄:
圖 3-1:典型的資料表示例
也許對(duì)紅襪隊(duì)球迷來說這是非常郁悶的統(tǒng)計(jì)資料,不過圖3-1的卻是列表資料的完美示范.它有三個(gè)表頭(year,opponent,season record(w-l)),跟著是四年份的資料.在表格上面的是表格標(biāo)題,說明了表格的內(nèi)容.
標(biāo)記這個(gè)資料表格的方式十分直觀,我們或許會(huì)以這樣的代碼完成這個(gè)工作:
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 |
這樣顯示的結(jié)果應(yīng)該和圖3-1十分相似,但是,我們可以在這個(gè)基礎(chǔ)上加上一些改進(jìn).
首先,我們能用更加語義化的
標(biāo)簽來存放"Boston Red Sox World Series Championships".標(biāo)簽需要緊跟在看上去,它更容易讓使用者看出表格的主題,同時(shí)也能夠幫助以其他方式得知網(wǎng)頁內(nèi)容的人.
讓我們拿掉開頭的那個(gè)段落,并加入正確的
:| 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 |
重要的是,標(biāo)題必須快速傳達(dá)后面資料的主題,根據(jù)默認(rèn)設(shè)置,大多數(shù)可視化瀏覽器將
標(biāo)簽內(nèi)的文字居中顯示在表格的最上面,當(dāng)然,我們稍后可以使用css來改變默認(rèn)設(shè)置的樣式 — 本章的技巧延伸中會(huì)討論這個(gè)問題.事實(shí)上,現(xiàn)在標(biāo)題位于獨(dú)特的標(biāo)簽內(nèi),正好讓我們之后的修改工作變得輕松簡單.#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 |
表格的表頭
在建立數(shù)據(jù)表格時(shí),善用表頭是件很重要的工作.在標(biāo)記重要單元格時(shí),我們可以發(fā)揮
標(biāo)簽的作用,而不是使用 之類在顯示上暗示用戶這個(gè)單元格是重要的的顯示效果標(biāo)簽.就像我們?cè)诘诙轮惺褂脴?biāo)題標(biāo)簽標(biāo)記段落標(biāo)題一樣.可視化瀏覽器或許會(huì)以粗體居中的效果顯示
標(biāo)簽中的內(nèi)容,但是我們依然可以用標(biāo)簽的獨(dú)特性,稍后再給這些重要的內(nèi)容加上不同的樣式,以便于存放在內(nèi)的一般資料及進(jìn)行區(qū)別.除顯示效果的優(yōu)勢(shì)外,使用
標(biāo)簽也能幫助非可視化瀏覽器 — 這部分我們稍后進(jìn)行深入討論.示例表格中的表頭是最上面的那一行: Year,Opponent和Season Record(W-L).我們來把剛才的顯示效果標(biāo)簽替換成正確的表頭標(biāo)簽:
| 1918 | Chicago Cubs | 75-51 |
| 1916 | Brooklyn Robins | 91-63 |
| 1915 | Philadelphia Phillies | 101-50 |
| 1912 | New York Giants | 105-47 |
使用
標(biāo)簽來標(biāo)記表頭單元格和圖3-1中的效果是一樣的,讓我們來看看為什么這個(gè)方法比較好:我們不必使用額外的顯示效果標(biāo)簽讓表頭突出顯示在資料內(nèi)容之外.
根據(jù)默認(rèn)設(shè)置,大部分可視化瀏覽器都會(huì)以粗體居中的效果展示
標(biāo)簽中的內(nèi)容.讓使用者輕易分辨出表頭和表格內(nèi)容的區(qū)別.由于它和
標(biāo)簽是相對(duì)獨(dú)立的,因此我們能為表頭加上與資料內(nèi)容不同的樣式.使用表頭標(biāo)簽的其他好處我們?cè)诮酉氯サ恼鹿?jié)中繼續(xù)討論.
#p#
表頭與數(shù)據(jù)的關(guān)系
我們可以利用headers屬性把表頭和對(duì)應(yīng)的
中的數(shù)據(jù)關(guān)聯(lián)起來,使屏幕閱讀器能更容易為需要的人們組織表格內(nèi)容.在使用了這個(gè)屬性之后,屏幕閱讀器將能更符合邏輯的讀出表格內(nèi)容,而不是像平常一樣死板的從每列最左邊讀到最右邊.我們繼續(xù)使用紅襪隊(duì)?wèi)?zhàn)績表當(dāng)作例子來示范使用方法.首先,我們需要為加上一個(gè)唯一的id,接著再為每個(gè)資料單元格加上headers屬性,對(duì)應(yīng)正確的表頭.
為每個(gè)表頭加上id很簡單,就是這樣:
| 1918 | Chicago Cubs | 75-51 |
| 1916 | Brooklyn Robins | 91-63 |
| 1915 | Philadelphia Phillies | 101-50 |
| 1912 | New York Giants | 105-47 |
我們?yōu)槊總€(gè)表頭id選擇簡短的有描述意義的名稱,接著我們?cè)贋槊總€(gè)資料單元格加上適當(dāng)?shù)膆eaders屬性,讓內(nèi)容匹配正確的表頭id:
| 1918 | Chicago Cubs | 75-51 |
| 1916 | Brooklyn Robins | 91-63 |
| 1915 | Philadelphia Phillies | 101-50 |
| 1912 | New York Giants | 105-47 |
在為表頭和內(nèi)容之間建立對(duì)應(yīng)關(guān)系后,屏幕閱讀器可能會(huì)議這樣的方式讀出表格的每一行內(nèi)容: "Year:1918,Opponent:Chicago Cubs,Season Record(W-L):75-51",比起從左到右讀出每格內(nèi)容的方法來說,這樣就有意義多了.
讓每個(gè)
具有唯一的id還有其他的好處,我們可以使用這個(gè)辨別依據(jù),設(shè)定特殊的css規(guī)則,在本章最后的技巧延伸終究會(huì)討論這個(gè)方法.#p#
使用abbr屬性
在之前的示例中,或許你會(huì)覺得表頭中"Season Record (W-L)"用語音合成器來念實(shí)在太長了一些,此時(shí),只要加上abbr屬性,我們就能縮短發(fā)音時(shí)的內(nèi)容,同時(shí)又為可視化瀏覽器保留了
單元格中的原始文字.| 1918 | Chicago Cubs | 75-51 |
| 1916 | Brooklyn Robins | 91-63 |
| 1915 | Philadelphia Phillies | 101-50 |
| 1912 | New York Giants | 105-47 |
我們加上了 abbr="Record" 后,屏幕閱讀器會(huì)讀出表頭使用簡短的版本后的"Record".
,
和在這里我還想提一下三個(gè)與表格相關(guān)的標(biāo)簽.它們不僅能為表格結(jié)構(gòu)提供更精確的語義,同時(shí)也為css提供額外的標(biāo)簽,讓你在設(shè)計(jì)表格行的樣式時(shí)不用為
標(biāo)簽設(shè)計(jì)那么多的class.引用一段W3C在HTML4.01規(guī)格中對(duì)這些標(biāo)簽的說明(http://www.php.cn/):
引用:表格行能夠以thead,tfoot和tbody標(biāo)簽分成表頭,表尾以及數(shù)目不限的表格主體.這種分類法讓瀏覽器支持獨(dú)立卷動(dòng)表格主體的功能.打印長表格時(shí),表頭和表尾也能在包含表格資料的每一頁上重復(fù)出現(xiàn).
因此,使用使用這種分類方式也能讓支持獨(dú)立表格主體的瀏覽器使用者更容易閱讀表格內(nèi)容,特別是長表格.
與
必須出現(xiàn)在之前,讓瀏覽器與其他設(shè)備能夠先載入這些內(nèi)容,以這種表格行分類方式標(biāo)記表格看起來是這樣的:...table header content...
...table footer content...
...table data row...
...table data row...
...table data row...
你會(huì)發(fā)現(xiàn),表頭和表尾資料以和
標(biāo)簽包圍,放在表格數(shù)據(jù)行之前.就像我之前所說的那樣,這些標(biāo)簽不僅能為表格提供更精確的語義,還能給css提供樣式錨點(diǎn)讓你為這些特定內(nèi)容設(shè)置css規(guī)則,而不必為每個(gè)
設(shè)計(jì)那么多的class.舉例來說,如果我們只想給數(shù)據(jù)區(qū)塊(以
標(biāo)記)設(shè)定與其他區(qū)塊不同的背景色.那么我們只需要寫這樣一段css就能達(dá)到目的:tbody {
background-color: gray;
}
如果沒有tbody標(biāo)簽的話,我們需要為每個(gè)想要加上灰色背景的
標(biāo)簽添加class屬性.有意義的標(biāo)記方式經(jīng)常能使之后用css設(shè)定樣式的工作變得十分輕松.這就是個(gè)好例子.#p#
表格邪惡嗎?
我想,如果我們根據(jù)表格標(biāo)簽設(shè)計(jì)之初的目的好好使用的話,那么答案就肯定是"不!".濫用表格創(chuàng)建復(fù)雜嵌套的布局的行為理所當(dāng)然會(huì)遭到譴責(zé),但是表格的確會(huì)給資料區(qū)塊提供它需要的良好的結(jié)構(gòu).
我們不能在整本書里都敘述創(chuàng)建完美表格所需要的各種技巧,因此就此打住,希望你已經(jīng)開始知道如何創(chuàng)建簡單的又具有可用性的方便css修飾的簡單表格.
談到樣式,讓我們用幾種不同的css技巧修飾一下之前的示例.
技巧延伸
與之前章節(jié)一樣,我們用靈活的語義化的結(jié)構(gòu)化的標(biāo)記為基礎(chǔ),然后用css給他加上一些樣式
首先,我們先來看看簡單的邊框技巧,在示例上創(chuàng)建單線邊框,然后我們?cè)贋楸砀駱?biāo)題和表頭加上獨(dú)特的樣式
建立邊框
已經(jīng)對(duì)border默認(rèn)屬性的3維效果感到厭倦了么?我也是.一般來說,為table標(biāo)簽加上border="1"就會(huì)與圖3-1的效果類似,當(dāng)然你也能換個(gè)方法,這邊有一個(gè)用css做出漂亮整潔邊框的訣竅.首先,我們給每個(gè)
單元格兩側(cè)(右側(cè)和底部)加上一像素的邊框:th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
只加上兩側(cè)邊框,是建立各處邊框等寬又同時(shí)讓大部分流行的瀏覽器能夠正確顯示的關(guān)鍵所在.如果我在四周都加上邊框,那么邊框的頂部和左側(cè)會(huì)在單元格排列時(shí)造成重疊,在稍后的示例中,我會(huì)給出一種只用一條border規(guī)則就達(dá)成小童效果的方法.
你會(huì)發(fā)現(xiàn)圖3-2中的整個(gè)表格只缺少了最頂部和最左側(cè)的邊線,為了補(bǔ)齊邊框,我們給
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加上兩側(cè)邊線的表格示例
圖3-3 補(bǔ)齊邊線后的表格示例
#p#
去掉間隙
現(xiàn)在我們已經(jīng)有了個(gè)完整的表格了,但是邊框之間的間隔是怎么回事?不幸的是,由于大多數(shù)瀏覽器會(huì)默認(rèn)設(shè)置一點(diǎn)外補(bǔ)丁,因此就會(huì)露出這些令人討厭的間隙了.
我們能做的是為表格元素加上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;
}
要用哪一種方法,這當(dāng)然由你來決定了,現(xiàn)在仍然有一些人再使用IE for Mac,而使用這個(gè)替代方法的話,會(huì)讓他們看到一些邊線的重復(fù),如果你并不在意這件事情,那就使用簡化的辦法吧.嚴(yán)格來說,這只是個(gè)顯示上的問題,表格功能絲毫不受影響.
由于我無法棄Mac狂熱者于不顧(任何稱職的網(wǎng)頁設(shè)計(jì)師都應(yīng)該這樣),因此再往后的示例中,我還是會(huì)用IE for Mac也能正確顯示的版本.
擴(kuò)大空間
現(xiàn)在我們手上有了一個(gè)完美的表格,不過它看上去有點(diǎn)局促...讓我們?yōu)槭诌叺膖h,td規(guī)則加上一點(diǎn)內(nèi)補(bǔ)丁,給它們呼吸的空間(圖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)補(bǔ)丁的表格示例
你知道嗎?如果用單一數(shù)值設(shè)定內(nèi)補(bǔ)丁的話(比如之前的例子的10px),就需要給元素的四邊都加上相同的設(shè)定值,你也可以按照順時(shí)針順序(上右下左)分別指定每一邊的設(shè)定值.如果你把內(nèi)部定設(shè)定為10px 5px 2px 10px的話,就會(huì)在頂部加上10px的內(nèi)補(bǔ)丁,右側(cè)加上5px的內(nèi)補(bǔ)丁,底部加上2px的內(nèi)補(bǔ)丁,左側(cè)加上10px的內(nèi)補(bǔ)丁.
另一條捷徑:如果上下的設(shè)定值相同,左右的設(shè)定值也相同的話,你就只需要分別設(shè)定一次就可以了,如果設(shè)定了padding:10px 5px的話,就會(huì)在上下部加上10px的內(nèi)補(bǔ)丁,在左右側(cè)加上5px的內(nèi)補(bǔ)丁.
圖3-6:順時(shí)針設(shè)定內(nèi)補(bǔ)丁和外邊界的順序
#p#
調(diào)整表頭的顯示效果
我們可以輕松的給表頭加上背景色，選用不同的字體，讓表頭更加的明顯，由于我們是使用了
標(biāo)簽而不是直接在行內(nèi)將內(nèi)容設(shè)為粗體,因此我們不必加上任何其他的標(biāo)簽,就能直接為表頭內(nèi)容設(shè)定樣式.我們?cè)跇?biāo)題下面也加上一點(diǎn)內(nèi)補(bǔ)丁,同時(shí)還用不同的字體,顏色(當(dāng)然是紅色)以突出標(biāo)題內(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:加上樣式的標(biāo)題和
為表頭加上背景圖片
剛才我們?yōu)楸砀窭锏?/p>元素加上了灰色背景,但是我們其實(shí)可以更進(jìn)一步,用背景圖平鋪在格子里來作出漂亮的效果,舉例來說,我們能用細(xì)致的灰色條紋模擬出許多Mac OS X中的窗口樣式
小圖片
首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個(gè)小圖片,在這個(gè)例子中,我們要制作一個(gè)2像素灰色和2像素白色交替出現(xiàn)的效果,因此圖片只需要4像素高,寬度多款都無所謂,因?yàn)樗鼤?huì)在
里平鋪開來,做出我們想要的條紋效果.為了節(jié)省帶寬,我們只做1像素寬(圖3-8)圖3-8:1X4的像素條紋圖片(放大后)
CSS
沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛制作好的小圖片路徑,除非另外制定,否則根據(jù)默認(rèn)設(shè)置,背景圖會(huì)自動(dòng)超每個(gè)方向平鋪.
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是套用這個(gè)樣式后的表格,表頭部分分線了條紋背景,要實(shí)驗(yàn)其他的平鋪背景圖也很方便,你可以試試怎樣才能為表頭或資料做出最好看的效果,好好享受這個(gè)實(shí)驗(yàn)的過程吧.
圖3-9:在表頭使用平鋪背景的示例
#p#
為ID指定圖標(biāo)
記得本章開始的時(shí)候我們?yōu)楸砀窭锏拿恳粋€(gè)
加上唯一的ID嗎?那時(shí)我們把這些id與數(shù)據(jù)列表中的headers屬性匹配起來,幫助非可視化瀏覽器的使用者了解表格的內(nèi)容,現(xiàn)在我們能在另一個(gè)地方發(fā)揮這個(gè)id的功能了,那就是為每個(gè)指定不同的圖標(biāo).圖標(biāo)路徑會(huì)完全記錄在css文件中,讓你能夠在網(wǎng)站重構(gòu),更新時(shí)輕易的替換,完全不必修改標(biāo)簽部分.
圖標(biāo)
我用photoshop做了三個(gè)獨(dú)特的圖標(biāo),分別用在示例中每個(gè)表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個(gè)圖標(biāo):
圖3-10hotoshop制作的三個(gè)表頭圖標(biāo)
CSS
加上css并不困難,因?yàn)槲覀優(yōu)槊總€(gè)
都制定了獨(dú)特的id,因此我們能直接用background屬性來指定正確的圖標(biāo).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%;
}
你應(yīng)該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規(guī)則,并把它放到每個(gè)表頭的圖標(biāo)名稱旁邊,這會(huì)使得我們的圖標(biāo)"坐"在我們指定的灰色背景上面,我們也在每個(gè)表頭內(nèi)容的左邊留夠圖標(biāo)的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果:
圖3-11:為每個(gè)
制定獨(dú)特圖標(biāo)的效果使用簡寫語法有明顯的優(yōu)點(diǎn),然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應(yīng)該先取消掉先前在
中以background定義的背景色.組合規(guī)則,簡化內(nèi)容
能夠達(dá)到相同功能的另一種寫法,是把每個(gè)表頭里反復(fù)出現(xiàn)的規(guī)則(在這個(gè)例子中是背景圖片,內(nèi)補(bǔ)丁和位置)拿出來寫在
定義一次就好了(因?yàn)樗鼈兊脑O(shè)定在每個(gè)中的確都一樣),然后只在#year,#opponent,#record定義內(nèi)保留各自不同的設(shè)定值(也就是圖片路徑)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ī)則,我們能夠省下每次重復(fù)定義修改的時(shí)間和精力,以這個(gè)例子來說,看起來只差六個(gè),半打而已,但是對(duì)大一些的樣式表來說,節(jié)省的量就很可觀了.
總結(jié)
在本章,我們不僅發(fā)現(xiàn)了表格并不邪惡,同時(shí)還深入了解表格之后,我們發(fā)現(xiàn),他們很適合用來標(biāo)記例表數(shù)據(jù),而且仍然易于使用
我們更發(fā)現(xiàn),只要加上一些樣式,就能控制列表數(shù)據(jù)的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.
本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
總結(jié)
以上是生活随笔為你收集整理的php中表格标记是,HTML标记语言——表格标记_HTML/Xhtml_网页制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html不间断滚动图片,不间断循环滚动图
- 下一篇： 求两者较大值的max函数的用法（c++基