HTML&CSS入門:為你的網頁換上精美的表格(Table)樣式

Table of Contents

Table of Contents

網頁上常看到Table的蹤跡,一張好看的表格會決定頁面的吸睛程度。 所以今天要重新認識一下表格設計,不依靠其他模板的力量,自己動手製作出幾個常見的表格。 以後在做調整時就能比較輕鬆設計出理想的樣貌。


Table of Contents

  • Results
  • 製作要點
    • 適用於產品方案的表格
    • 適用於資料介紹的表格
    • 無框線,圓角表格
  • 參考
  • 後感


Results

製作完成的幾個表格如下。 了解並掌握其中的技巧,稍作調整也能做出自己風格的表格。

適用於產品方案 plan_table


適用於資料介紹,像是公司資訊等等 company_info


無框線,圓角表格 round



製作要點

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似乎沒有效果,在使用時要留心一下。