close

<thead>應該拿來放表格的標題

<tbody>應該拿來放表格的內容

<tfoot>應該拿來放表格的註腳

在預設值的情況下,瀏覽器輸出結果 與一般表格 無異

 

將<thead><tfoot>分開的原因:若表格超過螢幕高度(或印出來超過一頁)的話,瀏覽器會將標題和註腳保留不動,只捲動表格內容

(但目前仍未受到任何瀏覽器的預設支援)

 

原始碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table width="200" border="0">
 <thead>
  <tr>
    <th>日期(月)</th>
    <th>數量</th>
    <th>單價</th>
    <th>金額</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>2013/1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2013/2</td>
    <td>2</td>
    <td>2</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2013/3</td>
    <td>3</td>
    <td>2</td>
    <td>6</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <td>小計</td>
    <td>6</td>
    <td>2</td>
    <td>12</td>
  </tr>
 </tfoot>
</table>
</body>
</html>

 

 

輸出畫面:

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 ksyia 的頭像
    ksyia

    工作筆記(CSS+HTML)

    ksyia 發表在 痞客邦 留言(0) 人氣()