重新認(rèn)識表格和一個訪問無障礙的數(shù)據(jù)表格例子
表格一直是網(wǎng)頁設(shè)計(jì)制作過程中一個重要的組成部分,在沒學(xué)習(xí)CSS布局前,大多是用來布局的,但到目前位置發(fā)現(xiàn)居然還沒真正地了解和完全掌握表格,不得不需要重新認(rèn)識表格......
在現(xiàn)代網(wǎng)頁設(shè)計(jì)制作中,表格主要的用途應(yīng)該是用來存放多元二維數(shù)據(jù)。和表格相關(guān)的標(biāo)簽有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地應(yīng)用這些標(biāo)簽?zāi)??先從名詞解釋開始。
名詞解釋
table
顯示二維數(shù)據(jù)
tr
表格中的一行
td
數(shù)據(jù)單元格
th
表頭單元格,定義一行或者一列的表頭信息,不能使用在布局表格里。
tbody
表格中的某一行或者多行編成組,要結(jié)合thead、tfoot一起使用
thead
將表格中的某一行或者多行編成組,要結(jié)合tbody、tfoot一起使用
tfoot
將表格中的某一行或者多行編成組,要結(jié)合tbody、thead一起使用
col
列,給某一列或者幾列應(yīng)用特定的屬性,結(jié)合colgroup一起使用
colgroup
列的組合,結(jié)合col一起使用
caption
定義表格的標(biāo)題,在表格開始的地方使用,僅一次
summary
說明表格的用途
例子:
<table summary="這是一個具有親和力的表格的演示" id="demotab"> <caption> 訪問 <a >www.forest53.com</a> 瀏覽器統(tǒng)計(jì) </caption> <thead> <tr> <th>瀏覽器 / 月 </th> <th>2005 / 11 </th> <th>2006 / 04 </th> <th>2006 / 05 </th> </tr> </thead> <tfoot> <tr> <th>總計(jì)</th> <td>1,646 ( 98.45% )</td> <td>6,978 ( 99.48% ) </td> <td>5,366 ( 99.56% ) </td> </tr> </tfoot> <tbody> <tr> <th>Internet Explorer</th> <td>1,535 (91.81%)</td> <td>5,905 (86.41%)</td> <td>4,550 (84.42%)</td> </tr> <tr> <th>Firefox</th> <td>98 (5.86%)</td> <td>746 (10.92%)</td> <td>640 (11.87%)</td> </tr> <tr> <th>Opera</th> <td>13 (0.78%)</td> <td>147 (2.15%)</td> <td>176 (3.27%)</td> </tr> </tbody> </table>
相關(guān)文章
邊框(border)邊距(margin)和間隙(padding)屬性的區(qū)別
邊框(border)邊距(margin)和間隙(padding)屬性的區(qū)別...2006-09-09