■表格

在 HTML 中，常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。

如果我們有透過 CSS 來制定表格的樣式，那就不需要在 HTML 之內用到這些屬性了。

table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性，

例如 文字、字體、邊框、顏色、以及 背景。

來看個例子。假設我們想要把以下的樣式加入表格內：

我們就會使用以下的樣式表：

table {
border:0;
font-family:Arial;
font-size:14px;
}
th {
background-color:yellow;
}
td {
border-bottom:1px solid #000000; }
.fail {
color:#FF0000;
}

以下的 HTML 碼：

<table>
  <tr>
    <th>學生</th>
    <th>分數</th>
  </tr>
  <tr>
    <td>Stella</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Sophie</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td class="fail">55</td>
  </tr>
</table>

就會顯現出：

 

◎border-collapse

在這裡我們要特別提到一個跟表格有關的 CSS 屬性，那就是 border-collapse。基本上，這個屬性可以直接代替 cellspacing=0 的宣告。我門來看看下面的例子：

CSS 宣告如下：

table {
  border:0;
  border-collapse:collapse;
  width:200px;
}

tr {
  border-bottom:1px solid #000;
}

以下的 HTML 碼：

<table>
  <tr><td>年度</td><td>收入</td></tr>
  <tr><td>2006</td><td>35.2M</td></tr>
  <tr><td>2007</td><td>40.1M</td></tr>
</table>

就會顯現出：

請注意到，年度攔及收入欄的下劃線中間並沒有空隙。這就是 border-collapse:collapse 的作用。