close

網頁就像文書，須要許多的表格來清楚表示文章的意思，利用表格來描素數據是再好不過的事了！

以下就來說明表格的寫法，我們先來寫個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 就可以改變了

之後，下一篇再來說明邊框的問題！





 

arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 雲橙雨林 的頭像
    雲橙雨林

    雲橙雨林

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄