2012年7月30日 星期一

Html 基本說明（17） - 加入表格


網頁就像文書，須要許多的表格來清楚表示文章的意思，利用表格來描素數據是再好不過的事了！
以下就來說明表格的寫法，我們先來寫個3x4的表格吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<table>
  <caption>
  各國獎牌數
  </caption>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Gold</th>
      <th>Sliver</th>
      <th>Copper</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>chinese taipei</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>american</td>
      <td>30</td>
      <td>15</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>sum</td>
      <td>32</td>
      <td>17</td>
      <td>22</td>
    </tr>
  </tfoot>
</table>
</body>
</html>
table:表格，所有表格最外層的標籤，所有表格標籤全寫在裡面。
caption:表格標題，說明表格內容。 
thead:表格表頭，放表格表頭的地方
tbody:表格內容主題，表示除表格標題，內容說明主題
tfoot:表格底層，表示內容結束，結尾地方，通常如果用在數據統計上，就是合計的地方
th:表格標題儲存格，放標題的地方
tr:表格列
td:表格欄
輸出結果如下：
2012-07-30_180052  

看起來不像是個表格，再來就來利用css 來修飾一下吧！
加入css

<style type="text/css">
table {
    width: 500px;
    border: 1px solid #CCC;    
}
caption {
    color: red;
    font-size: 24px;
}

thead {
    background-color: #FF0;
}
tbody {
    background-color: #9F3;
}
th {
    font-weight: bold;
}

tfoot {
    background-color: #3CF;
}
</style>
 先來看結果，再說明
2012-07-30_180758  
我先設table 寬度為500 px，設置灰色#ccc的外框
再設caption 字體顏色為 紅色，字體大小為24px;
設thead區塊背景為黃色
設thbody區塊背景為綠色 
設tfoot區塊背景為藍色
設th 標題為粗體

結果就完上述圖面的結果了，在裡面並未設到td 和tr 的部份，其實如果你要對其中td改變，也可以再新增td 就可以改變了
之後，下一篇再來說明邊框的問題！

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)