資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 設定交替表格行顏色？
使用 CSS 設定交替表格行顏色，也稱為斑馬條紋。它有助於提高表格的可讀性，因為更容易區分不同的行。
在這篇文章中，我們將瞭解四種不同的方法來使用 CSS 設定交替表格行顏色。我們有一個 5*2 的表格，我們的任務是使用 CSS 設定交替表格行顏色。
設定交替表格行顏色的方法
以下是使用 CSS 設定交替表格行顏色的方法列表，我們將在本文中逐步講解並提供完整的示例程式碼。
使用 nth-child 選擇器設定交替行顏色
為了使用 CSS 設定交替表格行顏色，我們使用了 CSS nth-child() 選擇器，它根據元素在其父元素子元素中的位置來選擇元素。
- 我們使用 HTML table 標籤建立了一個表格，使用 tr 標籤建立了五行，使用 th 標籤建立了一個表頭，並使用 td 標籤填充表格資料。
- 我們使用元素選擇器來設定表格樣式，例如設定表格的 寬度，設定標題的 背景顏色 和文字 顏色，以及設定表格資料的 填充、邊框 和 文字對齊。
- 我們在 tr 上使用了 "tr:nth-child(even)" 選擇器，它選擇所有偶數行並更改其背景顏色。
- 我們在 tr 上使用了 "tr:nth-child(odd)" 選擇器，它選擇所有奇數行並更改其背景顏色。
- 我們還可以使用數學表示式，例如偶數行用 2n，奇數行用 2n+1，而不是在 nth-child 選擇器的引數中使用 even 和 odd。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS nth-child 選擇器設定交替表格行顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-child(even) {
background-color: #c8e6c9;
}
tr:nth-child(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-child
</strong> psuedo-class selector to set
alternate table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用 nth-of-type 選擇器設定交替行顏色
在這種方法中，我們使用了 CSS nth-of-type偽類選擇器，它類似於 nth-child 選擇器，並根據元素在其相同型別（標籤名稱）的兄弟姐妹中的位置來匹配元素。
- 首先，我們建立並設計了一個 5*2 的表格，與第一種方法相同。
- 我們使用了 "tr:nth-of-type(even)"，它選擇所有 tr 標籤並更改偶數行的背景顏色。
- 我們使用了 "tr:nth-of-type(odd)"，它選擇所有 tr 標籤並更改奇數行的背景顏色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS nth-of-type 選擇器設定交替表格行顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-of-type(even) {
background-color: #c8e6c9;
}
tr:nth-of-type(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-of-type
</strong> psuedo-class selector to set alternate
table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用類選擇器設定交替行顏色
在這種設定交替表格行顏色的方法中，我們使用了基本方法，為每個 tr 標籤使用兩個類，即 even 和 odd。
- 首先，我們建立並設計了一個 5*2 的表格，與第一種方法相同。
- 然後，我們使用 odd 類設定奇數行的背景顏色，使用 even 類設定偶數行的背景顏色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS class 選擇器設定交替表格行顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.odd {
background-color: #e8f5e9;
}
.even {
background-color: #c8e6c9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>class
</strong> selector to set alternate table
row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr class="odd">
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr class="even">
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr class="odd">
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr class="even">
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr class="odd">
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用 not 選擇器設定交替行顏色
在這種方法中，我們使用了 not() 偽類選擇器來設定交替表格行顏色。它排除其引數中指定的元素。
- 我們在 tr 標籤上使用了 "tr:not(:first-child):not(:nth-child(odd))"，其引數為 first-child 選擇器和 nth-child 選擇器，它不選擇第一行和奇數行，也就是說，它只更改偶數行的背景顏色。
- 同樣，我們使用了 "tr:not(:nth-child(even))"，它排除偶數行並設定奇數行的背景顏色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS not 選擇器設定交替表格行顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:not(:first-child):not(:nth-child(odd)) {
background-color: #c8e6c9;
}
tr:not(:nth-child(even)) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>not</strong>
psuedo-class selector to set alternate table row
color using CSS.
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</tbody>
</table>
</body>
</html>
結論
在這篇文章中，我們瞭解瞭如何使用 CSS 設定交替表格行顏色。我們討論了四種不同的方法來設定交替表格行顏色：使用 CSS nth-child 選擇器、使用 CSS nth-of-type 選擇器、使用 CSS class 選擇器和使用 CSS not 選擇器。在這四種方法中，nth-child 和 nth-of-type 是最常用的方法。
更新於：2024年8月20日
9K+ 瀏覽量
廣告