在 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 碼，
|
<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 的作用。
下一頁： CSS 位置
Copyright 2007-2009 1keydata.com, All Rights Reserved.
|
|