HTML和CSS是現代網頁設計中最流行的技術之一。在網頁設計中，表格是一個重要的元素，常用於呈現數據和信息。本文將介紹如何使用HTML和CSS來創建圓角表格。
一、先看一下設計效果
在開始之前，我們先來看一下最終設計效果，如下圖所示。這是一個簡單的圓角表格，有不同顏色的表頭和背景色。
二、如何製作圓角表格
我們可以使用HTML和CSS輕鬆製作圓角表格。使用HTML來定義表格和單元格，使用CSS來控制樣式和布局。
首先，我們需要創建一個表格。我們可以使用HTML的
標籤來創建一個表格，如下所示。<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格4</td>
<td>單元格5</td>
<td>單元格6</td>
</tr>
</table>
在表格中，我們定義了一個包含3個單元格的表頭行，以及2個包含3個單元格的數據行。
接下來，我們需要使用CSS來控制表格的外觀。我們可以使用CSS的border-radius屬性來實現圓角效果。border-radius屬性指定一個元素的邊框角的半徑。
讓我們看看如何使用CSS來定義表格樣式。我們可以在標籤中添加CSS樣式，如下所示。
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #04AA6D;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
th:first-child,
td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
th:last-child,
td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
該CSS代碼包含以下樣式：
– table：將表格邊框合併，並設置其寬度為100%。
– th, td：定義表格中的表頭單元格和數據單元格，設置文本左對齊，並為單元格設置邊距。
– th：定義表頭單元格的背景顏色和文字顏色。
– tr:nth-child(even)：定義表格中的每一行的背景顏色。
– tr:hover：定義當鼠標懸停在表格行上時的背景顏色。
– th:first-child，td:first-child：定義表格單元格的左邊框的圓角半徑。
– th:last-child，td:last-child：定義表格單元格的右邊框的圓角半徑。
三、代碼完整實例
下面是完整的HTML和CSS代碼示例。
<!DOCTYPE html>
<html>
<head>
<title>圓角表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #04AA6D;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
th:first-child,
td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
th:last-child,
td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>圓角表格</h2>
<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格4</td>
<td>單元格5</td>
<td>單元格6</td>
</tr>
</table>
</body>
</html>
四、總結
在本文中，我們學習了如何使用HTML和CSS來創建圓角表格。我們使用HTML的
標籤來定義表格和單元格，使用CSS來為表格添加樣式，包括圓角。希望這篇教程能夠幫助您創建自己的圓角表格。原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/238909.html
贊 (0)
打賞
微信掃一掃
支付寶掃一掃
關於現代風格方形角幾cjjsf的信息
上一篇
2024-12-12 12:13
相關推薦
在web開發中，顯示錶格數據是一項很常見的需求。當我們需要在頁面上顯示大量數據時，除了使用傳統的表格樣式外，還可以使用Treeview這種可摺疊的表格樣式，以便更好地展示數據。本文…
Python渲染HTML庫指的是能夠將Python中的數據自動轉換為HTML格式的Python庫。HTML（超文本標記語言）是用於創建網頁的標準標記語言。渲染HTML庫使得我們可以…
本文將介紹如何使用Python根據表格數據生成折線圖。折線圖是一種常見的數據可視化圖表形式，可以用來展示數據的趨勢和變化。Python是一種流行的編程語言，其強大的數據分析和可視化…
本文將詳細介紹如何使用Python將圖片轉為表格。大家平時在處理一些資料的時候難免會遇到圖片轉表格的需求。比如從PDF文檔中提取表格等場景。當然，這個功能也可以通過手動複製、粘貼，…
本文將從以下幾個方面詳細介紹如何使用Python爬取網頁數據並生成表格： 一、獲取網頁數據 獲取網頁數據的一般思路是通過HTTP請求獲取網頁內容，最常用的方式是使用Python庫r…
本文將從多個方面詳細闡述Python如何做表格，包括表格的創建、數據的插入、表格的樣式設置等內容。 一、創建表格 要在Python中創建表格，我們可以使用第三方庫Pandas。具體…
CSS sans字體家族是一組基於CSS的無襯線字體，具有在不同設備和瀏覽器上保持一致的特性。本文將從優勢、使用、自定義等多個方面對CSS sans字體家族進行詳細介紹。 一、優勢…
Python語言是一種被廣泛應用的高級編程語言，也是一種非常適合於開發網頁和處理HTML的語言。在本文中，我們將從多個方面介紹如何用Python來編寫網頁和處理HTML。 一、Py…
本文將從多個方面闡述HTML sprite技術，包含基本概念、使用示例、實現原理等。 一、基本概念 1、什麼是HTML sprite？ HTML sprite，也稱CSS spri…
52周存錢法是一種有效的儲蓄方法，它能夠幫助人們規律性地儲蓄並實現財務目標。針對這種儲蓄方法，我們可以使用表格來更加直觀地記錄儲蓄進度，並且可以通過代碼實現，給用戶提供更加便捷的服…
微信掃一掃 
支付寶掃一掃 