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

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

表格一直是網頁設計製作過程中一個重要的組成部分，在沒學習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

說明表格的用途

例子：

 

  

   訪問 www.forest53.com 瀏覽器統計
  
  

   

    
瀏覽器 / 月 
    
2005 / 11 
    
2006 / 04 
    
2006 / 05 
   
  
  

   

    
總計
    
1,646 ( 98.45% )
    
6,978 ( 99.48% ) 
    
5,366 ( 99.56% ) 
   
  
  

   

    
Internet Explorer
    
1,535 (91.81%)
    
5,905 (86.41%)
    
4,550 (84.42%)
   
   

    
Firefox
    
98 (5.86%)
    
746 (10.92%)
    
640 (11.87%)
   
   

    
Opera
    
13 (0.78%)
    
147 (2.15%)
    
176 (3.27%)
   
  
 

