CSS-6: 進階表格、屬性選擇器與變數使用全解析

更新於 2025/03/03發佈於 2025/03/03閱讀時間約 17 分鐘

在本章節，我們將製作圖書館庫存表格，複習關於表格的觀念並學習屬性選擇器、變數的觀念。

首先，我們要確立表格的架構。在<table>標籤中，使用<thead>和<tbody>標籤。

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
        <th>Frequence</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</body>

接著，我們先新增一本書的資訊。分別是書名、作者、分類、狀態、評價、借閱的頻繁度(class="available-1"表示頻繁度低)

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
        <th>Frequence</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Great Gatsby</td>
        <td>F. Scott Fitzgerald</td>
        <td>Fiction</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
        <td class="available-1"></td>
      </tr>
    </tbody>
  </table>
</body>

好，我們再接著新增三本書。

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
        <th>Frequence</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Great Gatsby</td>
        <td>F. Scott Fitzgerald</td>
        <td>Fiction</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
        <td class="available-1"></td>
      </tr>
      <tr class="to-read">
        <td>1984</td>
        <td>George Orwell</td>
        <td>Dystopian</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
        <td class="available-2"></td>
      </tr>
      <tr class="in-progress">
        <td>Becoming</td>
        <td>Michelle Obama</td>
        <td>Biography</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
        <td class="available-3"></td>
      </tr>
      <tr class="read">
        <td>To Kill a Mockingbird</td>
        <td>Harper Lee</td>
        <td>Classic</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
        <td class="available-4"></td>
      </tr>
    </tbody>
  </table>
</body>

目前版面有點亂，我們初步設定一下樣式。

h1 {
  text-align: center;
  font-family: Arial, sans-serif;
}

table {
  width: 80%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  border-collapse: collapse; //記得添加
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #f4f4f4;
}

呈現效果:

接著，我們要介紹屬性選擇器，屬性選擇器用於根據元素的屬性或屬性值來選擇HTML元素。

以下是常見的屬性選擇器:

[attribute]: 選擇帶有指定屬性的所有元素

[type] {
  border: 1px solid red;
}

[attribute="value"]: 選擇具有指定屬性和值完全匹配的的元素

// 選擇所有 "type" 屬性完全等於 "text" 的元素
[type="text"] {
  background-color: yellow;
}

[attribute~="value"]: 選擇屬性值中包含指定值的元素 (用空格分隔的單詞列表之一)

// 選擇
[class~="button"] {
  font-weight: bold;
}

[attribute^="value"]: 選擇屬性值以指定值開頭的元素。

/* 選擇所有 "href" 屬性值以 "https" 開頭的元素 */
[href^="https"] {
  color: green;
}

[attribute$="value"]: 選擇屬性值以指定值結尾的元素。

/* 選擇所有 "src" 屬性值以 ".png" 結尾的元素 */
[src$=".png"] {
  border: 2px solid blue;
}

[attribute*="value"]: 選擇屬性值中包含指定字串的元素，無論該字串的位置或是否是單獨的單字。

/* 選擇所有 "alt" 屬性中包含 "cat" 的元素 */
[alt*="cat"] {
  background-color: lightblue;
}

好，接著我們就可以繼續為表格添加樣式了:

tr[class="read"] {
  background-image: linear-gradient(to right, #d4edda, #c3e6cb);
}

tr[class="to-read"] {
  background-image: linear-gradient(to right, #fff3cd, #ffeeba);
}

tr[class="in-progress"] {
  background-image: linear-gradient(to right, #d1ecf1, #bee5eb);
}

呈現效果:

好，接下來我們要為 Starus 增加邊框效果。

span {
  display: inline-block;
}
/* 狀態樣式 */
span[class="status"] {
  padding: 5px 10px;
  border-radius: 5px;
}

tr[class="read"] span[class="status"] {
  border: 1px solid #28a745;
  background-image: linear-gradient(to right, #d4edda, #c3e6cb);
}

tr[class="to-read"] span[class="status"] {
  border: 1px solid #ffc107;
  background-image: linear-gradient(to right, #fff3cd, #ffeeba);
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid #17a2b8;
  background-image: linear-gradient(to right, #d1ecf1, #bee5eb);
}

呈現效果:

再接下來，我們要讓 Rate 中呈現可以評分的圓框。為此我們要選擇所有 <span> 元素，其 class 屬性的值以 "rate" 開頭。而子選擇器 > 表示僅選擇某元素的直接子元素，也就是說: 只有 class 屬性值以 "rate" 開頭的 <span> 父元素的直接子 <span> 元素會被套用樣式。

span[class^="rate"] > span {
  width: 15px;
  height: 15px;
  margin: 0 2px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #e0e0e0;
}

呈現效果:

好，接著我們要為每本書個別設定評分。

span[class~="one"] span:first-child {
  background-image: linear-gradient(to right, #ffcccb, #f08080);
}

span[class~="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(to right, #ffe4b5, #f5deb3);
}

span[class~="three"] span {
  background-image: linear-gradient(to right, #add8e6, #87cefa);
}

其中我們對顏色套用了向右漸層的效果。
要應用漸層，必須使用 background-image：

呈現效果:

好，最後，我們要介紹變數的觀念: CSS 變數（也稱為 自訂屬性）是一種在 CSS 中定義和使用值的方式，可以讓你更方便地重複使用、維護和管理樣式。

語法:

:root {
  --main-color: #3498db;
  --font-size: 16px;
  --spacing: 10px;
}

:root（表示 HTML 文件的根元素）中，適用於整個頁面。

如何使用變數:

body {
  color: var(--main-color);
  font-size: var(--font-size);
  margin: var(--spacing);
}

有了簡單的認識後，我們就可以為Frequence改變顏色來表示借閱的頻繁程度，首先，先定義好一些顏色變數。

:root {
  --color1: #ffb3b3;
  --color2: #ff8080;
  --color3: #ff4d4d;
  --color4: #e60000;
}

接著，我們再個別套用相應的設定。

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

呈現效果:

最後，我們再添加一個 Degree 表示顏色所代表的頻繁程度。

  <div id="legend">
    <span>Degree</span>
    <div id="legend-gradient"></div>
  </div>
</body>

#legend-gradient {
  width: calc(50% + 20px);
  height: 20px;
  background-image: linear-gradient(
    to right,
    var(--color1) 0% 25%,     /* 第一段：0% 到 25% */
    var(--color2) 25% 50%,    /* 第二段：25% 到 50% */
    var(--color3) 50% 75%,    /* 第三段：50% 到 75% */
    var(--color4) 75% 100%    /* 第四段：75% 到 100% */
  );
}