資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 CSS 建立斑馬條紋表格？
要在網頁上建立表格，我們使用 <table> 元素。它允許我們使用 <tr> 元素設定表格行。在此基礎上，使用 <td> 元素放置資料。表格也可以有條紋。這種有條紋的表格對每隔一行都有不同的外觀。要為每隔一行設定屬性，我們將使用 nth-child(even) 屬性。讓我們看看如何使用 HTML 和 CSS 建立一個斑馬條紋表格。
建立表格
使用 <table> 元素建立表格。我們為表格設定了三列。標題是使用 <th> 元素設定的。使用 <tr> 元素建立了三行 −
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>BirthMonth</th>
</tr>
<tr>
<td>Jack</td>
<td>Roy</td>
<td>January</td>
</tr>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>March</td>
</tr>
<tr>
<td>Brandon</td>
<td>Anderson</td>
<td>February</td>
</tr>
</table>
設定表格樣式
我們使用 width 屬性設定了表格的寬度 −
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
設定表格標題和單元格樣式
th 和 td 的樣式如下所示。我們使用 text-align 屬性將它對齊到中間，取值 left −
th, td {
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: left;
padding: 16px;
}
設定斑馬條紋表格的交替行樣式
nth-child(even) 可用於設定交替行的樣式 −
tr:nth-child(even) {
background-color: #8b8b8b;
color: white;
}
示例
要使用 CSS 建立一個斑馬條紋表格，程式碼如下 −
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #8b8b8b;
color: white;
}
</style>
</head>
<body>
<h1>Zebra Striped Table Example</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>BirthMonth</th>
</tr>
<tr>
<td>Jack</td>
<td>Roy</td>
<td>January</td>
</tr>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>March</td>
</tr>
<tr>
<td>Brandon</td>
<td>Anderson</td>
<td>February</td>
</tr>
</table>
</body>
</html>
更新於： 14-Dec-2023
580 次瀏覽
廣告