在 HTML 中,常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式,那就不需要在 HTML 之內用到這些屬性了。
table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性,例如 文字、字體、邊框、顏色、以及 背景。
來看個例子。假設我們想要把以下的樣式加入表格內:
我們就會使用以下的樣式表:
table { |
以下的 HTML 碼,
<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> |
就會顯現出,
年度 | 收入 |
2006 | 35.2M |
2007 | 40.1M |
請注意到,年度攔及收入欄的下劃線中間並沒有空隙。這就是 border-collapse:collapse 的作用。
留言列表