網頁上常看到Table的蹤跡,一張好看的表格會決定頁面的吸睛程度。 所以今天要重新認識一下表格設計,不依靠其他模板的力量,自己動手製作出幾個常見的表格。 以後在做調整時就能比較輕鬆設計出理想的樣貌。
製作完成的幾個表格如下。 了解並掌握其中的技巧,稍作調整也能做出自己風格的表格。
適用於產品方案
適用於資料介紹,像是公司資訊等等
無框線,圓角表格
Table中的主要構成有<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似乎沒有效果,在使用時要留心一下。