首頁 > web前端 > css教學 > 重新認識表格和一個訪問無障礙的資料表格範例_CSS/HTML

重新認識表格和一個訪問無障礙的資料表格範例_CSS/HTML

WBOY
發布: 2016-05-16 12:11:03
原創
1909 人瀏覽過

除特別說明外,本站內容採用創作共用授權署名和非商業用途,請尊重勞動成果。

表格一直是網頁設計製作過程中一個重要的組成部分,在沒學習CSS佈局前,大多是用來佈局的,但到目前位置發現居然還沒真正地了解和完全掌握表格,不得不需要重新認識表格......

在現代網頁設計製作中,表格主要的用途應該是用來存放多元二維資料。和表格相關的標籤有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地應用這些標籤?先從名詞解釋開始。

名詞解釋

table

顯示二維資料

tr

表格中的一行

td

資料單元格

th

表頭單元格,定義一行或一列的表頭訊息,不能使用在版面配置表格裡。

tbody

表格中的某一行或多行編成組,要結合thead、tfoot一起使用

thead

將表格中的某一行或多行編成群組,要結合tbody、tfoot一起使用

tfoot

將表格中的某一行或多行編成群組,要結合tbody、thead一起使用

col

列,給某一列或幾列套用特定的屬性,結合colgroup一起使用

colgroup

列的組合,結合col一起使用

caption

定義表格的標題,在表格開始的地方使用,僅一次

summary

說明表格的用途

範例:

<table summary="这是一个具有亲和力的表格的演示" id="demotab">
<caption>
访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计
</caption>
<thead>
<tr>
<th>浏览器 / 月 </th>
<th>2005 / 11 </th>
<th>2006 / 04 </th>
<th>2006 / 05 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>总计</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>
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板