HTML&CSS入門：為你的網頁換上精美的表格(Table)樣式
Table of Contents
網頁上常看到Table的蹤跡，一張好看的表格會決定頁面的吸睛程度。 所以今天要重新認識一下表格設計，不依靠其他模板的力量，自己動手製作出幾個常見的表格。 以後在做調整時就能比較輕鬆設計出理想的樣貌。
Table of Contents
- Results
- 製作要點
- 適用於產品方案的表格
- 適用於資料介紹的表格
- 無框線，圓角表格
- 參考
- 後感
Results
製作完成的幾個表格如下。 了解並掌握其中的技巧，稍作調整也能做出自己風格的表格。
適用於產品方案
適用於資料介紹，像是公司資訊等等
無框線，圓角表格
製作要點
Table中的主要構成有<tr>， <td>，<th>。
- tr: 表示表格的列。
- td: 表示表格的資料格。
- th: 表示表格的標題格。
另外也可以加入<thead>，<tfoot>， <tbody>來方便分別設計表頭，表尾，跟中間內容。
所以針對這些要素做設計就可以達成上述實作完成的表格。
適用於產品方案的表格
Table中的border-collapse設為 collapse 是為了讓表格的整個外框跟各個格子的邊框統一起來。
想要各個標題格<tr>的背景色不同，因此分別給上class來做設計。
.basic {
background-color: #0ceffe;
}
.standard {
background-color: #039be5;
border: 1px solid #039be5;
color: white;
}
.premium {
border: 1px solid #2e3a4d;
background-color: #2e3a4d;
color: white;
}
中間的方案是人氣方案，設計較為不同，因此要做一些特殊處理。
<th class="standard popular">
<span class="no1">No.1</span>
Standard
</th>
.popular {
position: relative;
}
.no1{
position: absolute;
top: -10px;
background: #bdcc28;
width: 60px;
font-size: 10px;
border-radius: 15px;
line-height: 1;
padding: 5px;
}
適用於資料介紹的表格
因最左邊的格子為標題格，所以每一個<tr>中都含有一個<th>。
<table>
<tr>
<th>Company</th>
<td>CSS-Play Inc.</td>
</tr>
<tr>
<th>Founded</th>
<td>1990/3/20</td>
</tr>
<tr>
<th>Number of employees</th>
<td>500</td>
</tr>
<tr>
<th>E-mail</th>
<td>contact@css-play.com</td>
</tr>
</table>
為了製作出三角形箭頭的效果，特地加入以下css設計。
table th{
position: relative;
...
}
table th:after{
display: block;
content: "";
width: 0px;
height: 0px;
position: absolute;
top:calc(50% - 10px);
right:-10px;
border-left: 10px solid #7d7d7d;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
無框線，圓角表格
這個例子使用了<thead>，<tbody>方便做區分。
標題列以外，奇數列跟偶數列的背景色有所區分。
所以用tr:nth-child(odd)設計奇數列，tr:nth-child(even)設計偶數列。
外框的圓角設計較為麻煩些，必須對四個角的要素做調整，指定各個角落的方式如下。
th:first-child: 左上角th:last-child: 右上角tr:last-child td:first-child: 左下角tr:last-child td:last-child: 右下角
table thead th:first-child {
border-radius: 5px 0 0 0;
border: 1px solid blue;
}
table thead th:last-child {
border-radius: 0 5px 0 0;
border-right: 1px solid blue;
}
table tbody tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
table tbody tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
參考
後感
border設計時，可以對table, td, th來做設定，<tr>，<thead>上設置border似乎沒有效果，在使用時要留心一下。