CSS 教學  >  表格


在 HTML 中,常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式,那就不需要在 HTML 之內用到這些屬性了。 table、th、tr、及 td 這幾個選擇器..
 

在 HTML 中,常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式,那就不需要在 HTML 之內用到這些屬性了。

tablethtr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性,例如 文字字體邊框顏色、以及 背景

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

  • 表格: 沒有邊框,字體是 arial,字的大小是 14px。
  • 標題: 背景是黃色。
  • 格子: 每個格子的下面有一條黑色實線。
  • 低於 60 的分數欄內,字體是紅色的。

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

    table {
      border: 0;
      font-family: arial;
      font-size:14px;
    }
    th {
      background-color:yellow;
    }
    td {
      border-bottom:1 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>

    就會顯現出,

    學生 分數
    Stella 85
    Sophie 95
    Alice 55

    border-collapse

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

    CSS 宣告如下,

    table {
      border:0;
      border-collpase:collpase;
      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>

    就會顯現出,

    年度收入
    200635.2M
    200740.1M

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

    下一頁: CSS 位置