CSS 表格 (Table)

CSS 教學 > 表格

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

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

table、th、tr、及 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 碼，

就會顯現出，

年度	收入
2006	35.2M
2007	40.1M

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

下一頁： CSS 位置

相關文件

CSS 教學 > 表格

border-collapse