CSS樣式化美化網(wǎng)頁(yè)table表格指南
表格是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的元素，用于展示數(shù)據(jù)和信息。通過(guò)CSS可以對(duì)表格進(jìn)行美化和功能性強(qiáng)化，包括設(shè)置邊框、背景色、文本對(duì)齊以及響應(yīng)式布局等，進(jìn)一步提升用戶(hù)體驗(yàn)和數(shù)據(jù)可讀性。尤其是在展示數(shù)據(jù)和信息時(shí)。盡管HTML表格提供了結(jié)構(gòu)化的數(shù)據(jù)展示，但要使其看起來(lái)既美觀又實(shí)用，CSS 樣式化至關(guān)重要。
一、典型的 HTML 表格
在了解如何樣式化表格之前，我們首先來(lái)看看一個(gè)典型的 HTML 表格結(jié)構(gòu)。一個(gè)基本的 HTML 表格由 <table>、<thead>、<tbody> 和 <tfoot> 元素組成，分別用于定義表格、表頭、表體和表腳。表格中的每一行由 <tr> 定義，而每一列由 <td>（數(shù)據(jù)單元格）或 <th>（表頭單元格）定義。
示例: 基本 HTML 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基礎(chǔ) HTML 表格</title>
</head>
<body>
<h1>員工信息表</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>部門(mén)</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>開(kāi)發(fā)工程師</td>
<td>技術(shù)部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>設(shè)計(jì)師</td>
<td>設(shè)計(jì)部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
</tr>
</tfoot>
</table>
</body>
</html>
上述例子中創(chuàng)建了一個(gè)簡(jiǎn)單的員工信息表，包含了表頭、表體和表腳，表頭定義了表格的列名，表體包含了實(shí)際的數(shù)據(jù)行，而表腳提供了額外的信息或說(shuō)明。
二、樣式化我們的表格
1、基本樣式
為了讓表格看起來(lái)更加美觀，我們可以使用 CSS 來(lái)設(shè)置表格的邊框、背景色、文本對(duì)齊方式等基本樣式。
示例: 基本表格樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>樣式化表格</title>
<style>
table {
width: 100%;
border-collapse: collapse; /* 合并表格邊框 */
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e2e2e2;
}
</style>
</head>
<body>
<h1>樣式化表格示例</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>部門(mén)</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>開(kāi)發(fā)工程師</td>
<td>技術(shù)部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>設(shè)計(jì)師</td>
<td>設(shè)計(jì)部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
</tr>
</tfoot>
</table>
</body>
</html>
我們對(duì)表格應(yīng)用了一些基本的樣式：邊框、內(nèi)邊距、背景顏色和交替行的背景色，另外還添加了懸停效果，以便在用戶(hù)將鼠標(biāo)懸停在行上時(shí)，背景色會(huì)有所變化。
2、間距和布局
控制表格的間距和布局是確保表格在不同屏幕上顯示良好的關(guān)鍵?？梢允褂?CSS 的 padding 和 margin 屬性來(lái)調(diào)整間距，使用 border-spacing 屬性來(lái)設(shè)置單元格之間的間距。
示例: 調(diào)整表格間距和布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格間距和布局</title>
<style>
table {
width: 80%;
margin: 20px auto; /* 自動(dòng)居中 */
border-spacing: 0; /* 單元格之間的間距 */
}
th, td {
border: 1px solid #ddd;
padding: 12px; /* 單元格內(nèi)邊距 */
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>表格間距和布局示例</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>部門(mén)</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>開(kāi)發(fā)工程師</td>
<td>技術(shù)部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>設(shè)計(jì)師</td>
<td>設(shè)計(jì)部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
</tr>
</tfoot>
</table>
</body>
</html>
這個(gè)例子設(shè)置表格的寬度為頁(yè)面寬度的 80%，并將表格居中顯示，使用 border-spacing 屬性來(lái)調(diào)整單元格之間的間距，并增加了單元格的內(nèi)邊距，使得內(nèi)容更為舒適易讀。
三、簡(jiǎn)單的排版
1、字體和文本對(duì)齊
通過(guò) CSS，我們可以控制表格中的字體和文本對(duì)齊方式，使其符合設(shè)計(jì)需求。
示例: 表格排版樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格排版樣式</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif; /* 字體 */
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center; /* 中央對(duì)齊 */
}
th {
background-color: #2196F3;
color: white;
font-weight: bold; /* 加粗 */
}
td {
color: #555;
}
</style>
</head>
<body>
<h1>表格排版樣式示例</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>部門(mén)</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>開(kāi)發(fā)工程師</td>
<td>技術(shù)部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>設(shè)計(jì)師</td>
<td>設(shè)計(jì)部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
</tr>
</tfoot>
</table>
</body>
</html>
示例中我們?cè)O(shè)置了字體樣式為 Arial，并將單元格中的文本居中對(duì)齊，表頭使用了更為顯眼的顏色和加粗字體，使其更加突出。
2、顏色樣式
顏色不僅可以提升表格的視覺(jué)效果，還可以幫助突出關(guān)鍵信息。使用 CSS 可以輕松地為表格添加背景色、邊框顏色等樣式。
示例: 表格顏色樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格顏色樣式</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 2px solid #4CAF50;
padding: 10px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:hover {
background-color: #d1e7dd;
}
</style>
</head>
<body>
<h1>表格顏色樣式示例</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>職位</th>
<th>部門(mén)</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>開(kāi)發(fā)工程師</td>
<td>技術(shù)部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>設(shè)計(jì)師</td>
<td>設(shè)計(jì)部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">數(shù)據(jù)來(lái)源：公司人力資源部</td>
</tr>
</tfoot>
</table>
</body>
</html>
示例中我們使用了不同的背景顏色來(lái)區(qū)分奇數(shù)行和偶數(shù)行，同時(shí)設(shè)置了懸停效果的背景顏色，使得用戶(hù)在瀏覽時(shí)更容易閱讀和辨別數(shù)據(jù)。
四、綜合練習(xí)題
下面我們自己動(dòng)手來(lái)練習(xí)一下以下的兩道題目吧：
題 1: 創(chuàng)建一個(gè)自定義的產(chǎn)品表格
要求：
- 創(chuàng)建一個(gè)產(chǎn)品表格，包含以下列：產(chǎn)品名、類(lèi)別、價(jià)格和庫(kù)存。
- 使用 CSS 樣式化表格，確保表頭使用醒目的顏色，表體交替行有不同的背景色，并添加懸停效果。
- 添加一個(gè)“總計(jì)”行，在表腳部分顯示總產(chǎn)品數(shù)和庫(kù)存總數(shù)。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>產(chǎn)品表格</title>
<style>
table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
th, td {
border: 1px solid #ccc;
padding: 12px;
text-align: left;
}
th {
background-color: #ff5722;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0e0e0;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<h1>產(chǎn)品信息表</h1>
<table>
<thead>
<tr>
<th>產(chǎn)品名</th>
<th>類(lèi)別</th>
<th>價(jià)格</th>
<th>庫(kù)存</th>
</tr>
</thead>
<tbody>
<tr>
<td>筆記本</td>
<td>電子產(chǎn)品</td>
<td>￥500</td>
<td>50</td>
</tr>
<tr>
<td>智能手機(jī)</td>
<td>電子產(chǎn)品</td>
<td>￥3000</td>
<td>20</td>
</tr>
<!-- 添加更多產(chǎn)品行 -->
</tbody>
<tfoot>
<tr>
<td colspan="3">總計(jì)</td>
<td>70</td>
</tr>
</tfoot>
</table>
</body>
</html>題 2: 設(shè)計(jì)一個(gè)學(xué)生成績(jī)表格
要求：
- 創(chuàng)建一個(gè)學(xué)生成績(jī)表格，包含以下列：學(xué)生姓名、科目、成績(jī)。
- 使用 CSS 樣式化表格，使表頭具有背景色和白色文本，所有單元格的文本居中對(duì)齊，表格寬度設(shè)置為 100%。
- 添加一個(gè)行樣式，當(dāng)成績(jī)低于 60 時(shí)，該行背景色為紅色；當(dāng)成績(jī)?cè)?60 到 80 之間時(shí)，背景色為黃色；當(dāng)成績(jī)?cè)?80 以上時(shí)，背景色為綠色。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>學(xué)生成績(jī)表</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: 'Arial', sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #2196F3;
color: white;
}
.low {
background-color: #ffcccc;
}
.medium {
background-color: #ffffcc;
}
.high {
background-color: #ccffcc;
}
</style>
</head>
<body>
<h1>學(xué)生成績(jī)表</h1>
<table>
<thead>
<tr>
<th>學(xué)生姓名</th>
<th>科目</th>
<th>成績(jī)</th>
</tr>
</thead>
<tbody>
<tr class="low">
<td>王五</td>
<td>數(shù)學(xué)</td>
<td>45</td>
</tr>
<tr class="medium">
<td>趙六</td>
<td>英語(yǔ)</td>
<td>75</td>
</tr>
<tr class="high">
<td>孫七</td>
<td>物理</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>總結(jié)
在網(wǎng)頁(yè)設(shè)計(jì)中,表格是展示數(shù)據(jù)不可少的元素,通過(guò)CSS,我們可以對(duì)表格進(jìn)行美化和功能性強(qiáng)化,如設(shè)置邊框、背景色、文本對(duì)齊和響應(yīng)式布局等,以增強(qiáng)用戶(hù)體驗(yàn)和數(shù)據(jù)的可讀性,這不僅使表格結(jié)構(gòu)化數(shù)據(jù)展示更加美觀,還提升了實(shí)用性
到此這篇關(guān)于CSS樣式化美化網(wǎng)頁(yè)table表格指南的文章就介紹到這了,更多相關(guān)CSS樣式化表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
是否想不用photoshop來(lái)創(chuàng)建一個(gè)帶漸變的標(biāo)題文字嗎? 這里用一個(gè)簡(jiǎn)單的css技巧來(lái)向你展示如何僅僅使用css和png圖片來(lái)制造這種效果.2008-05-05
Chrome的hack寫(xiě)法以及CSS的支持程度圖示
Chrome的CSS支持程度 引用自 Estelle2008-09-09
使用div+css（姑且這樣叫，雖然我也不喜歡，但是叫什么呢？）布局的好處不用多說(shuō)，經(jīng)常性地會(huì)使用到float，那么清除浮動(dòng)就是必須要做的，而且隨時(shí)性地對(duì)父級(jí)元素清除浮動(dòng)的做法也被認(rèn)為是書(shū)寫(xiě)CSS的良好習(xí)慣之一。2008-03-03
2008-08-08
推薦三種簡(jiǎn)潔的Tab導(dǎo)航（網(wǎng)頁(yè)選項(xiàng)卡）簡(jiǎn)析
推薦三種簡(jiǎn)潔的Tab導(dǎo)航（網(wǎng)頁(yè)選項(xiàng)卡）簡(jiǎn)析...2007-05-05
超強(qiáng)推薦CSS打造經(jīng)典鼠標(biāo)觸發(fā)顯示選項(xiàng)
超強(qiáng)推薦CSS打造經(jīng)典鼠標(biāo)觸發(fā)顯示選項(xiàng)...2007-09-09
用css來(lái)實(shí)現(xiàn)自動(dòng)截取文字，不需要后臺(tái)程序和JS的使用。2008-06-06
對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法
對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法...2007-11-11
CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路
CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路...2007-10-10
HTML/XHTML模板...2007-01-01