運用CSS設計表格

為了搭配網站風格與版面配置, 枯燥的表格也需要多樣化, 只要將htm語法做結構化的設計, 加上CSS, 就可重複運用表格樣式, 簡單又快速。

• 設計表格時, 我喜歡這樣做


• <table id="Nclass" summary="簡要說明">
  <thead>
  <tr>
  <th scope="col">欄1</th>
  <th scope="col">欄2</th>
  <th scope="col">欄3</th>
  <th scope="col">欄4</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
  <td>A4</td>
  </tr>
  <tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
  <td>B4</td>
  </tr>
  <tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
  <td>C4</td>
  </tr>
  <tr>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
  <td>D4</td>
  </tr>
  </tbody>
  </table>
  




• CSS可以這樣設計




• 
  #Nclass thead
  {....}
  
  #Nclass tbody
  {....}
  
  #Nclass tfoot
  {....}
  
  也可針對td
  #Nclass tbody td
  {....}
  





• 如果看不懂, 請參考此處下載檔案 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
  
• 上方檔案使用時請注意 border-collapse: collapse 於Firefox2 使用上會有錯誤，兩個方法解決
  
  
  
  • 左右不設邊界
    
  • 將table的cellpadding設定為"0", 如下:
    
    <table cellpadding="0" .....
    
    
    想要知道原因,請參考此處
  • http://stackoverflow.com/questions/1035706/firefox-1-pixel-bug-with-border-collapse-workaround
    
    
  
  
• 以上只是個人習慣, 若想更深入運用table, 請參考此處
  http://www.w3.org/TR/CSS21/tables.html