CSS样式化美化网页table表格指南
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、典型的 HTML 表格</a></li><li><a href="#_label1">二、样式化我们的表格</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_0">1、基本样式</a></li><li><a href="#_lab2_1_1">2、间距和布局</a></li></ul><li><a href="#_label2">三、简单的排版</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_2">1、字体和文本对齐</a></li><li><a href="#_lab2_2_3">2、颜色样式</a></li></ul><li><a href="#_label3">四、综合练习题</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_4">题 1: 创建一个自定义的产品表格</a></li><li><a href="#_lab2_3_5">题 2: 设计一个学生成绩表格</a></li></ul><li><a href="#_label4">总结</a></li><ul class="second_class_ul"></ul></ul></div><p>表格是网页设计中不可或缺的元素，用于展示数据和信息。通过CSS可以对表格进行美化和功能性强化，包括设置边框、背景色、文本对齐以及响应式布局等，进一步提升用户体验和数据可读性。尤其是在展示数据和信息时。尽管HTML表格提供了结构化的数据展示，但要使其看起来既美观又实用，CSS 样式化至关重要。</p><p class="maodian"><a name="_label0"></a></p><h2>一、典型的 HTML 表格</h2>
<p>在了解如何样式化表格之前，我们首先来看看一个典型的 HTML 表格结构。一个基本的 HTML 表格由 <table>、<thead>、<tbody> 和 <tfoot> 元素组成，分别用于定义表格、表头、表体和表脚。表格中的每一行由 <tr> 定义，而每一列由 <td>（数据单元格）或 <th>（表头单元格）定义。</p>
<p><strong>示例: 基本 HTML 表格</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础 HTML 表格</title>
</head>
<body>
<h1>员工信息表</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>开发工程师</td>
<td>技术部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>设计师</td>
<td>设计部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">数据来源：公司人力资源部</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="" height="619" src="https://img.jbzj.com/file_images/article/202409/202497101039027.png" width="1497" /></p>
<p>上述例子中创建了一个简单的员工信息表，包含了表头、表体和表脚，表头定义了表格的列名，表体包含了实际的数据行，而表脚提供了额外的信息或说明。</p>
<p class="maodian"><a name="_label1"></a></p><h2>二、样式化我们的表格</h2>
<p class="maodian"><a name="_lab2_1_0"></a></p><h3>1、基本样式</h3>
<p>为了让表格看起来更加美观，我们可以使用 CSS 来设置表格的边框、背景色、文本对齐方式等基本样式。</p>
<p><strong>示例: 基本表格样式</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><!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>部门</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>开发工程师</td>
<td>技术部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>设计师</td>
<td>设计部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">数据来源：公司人力资源部</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="" height="355" src="https://img.jbzj.com/file_images/article/202409/202497101116904.png" width="1744" /></p>
<p>我们对表格应用了一些基本的样式：边框、内边距、背景颜色和交替行的背景色，另外还添加了悬停效果，以便在用户将鼠标悬停在行上时，背景色会有所变化。</p>
<p class="maodian"><a name="_lab2_1_1"></a></p><h3>2、间距和布局</h3>
<p>控制表格的间距和布局是确保表格在不同屏幕上显示良好的关键。可以使用 CSS 的 padding 和 margin 属性来调整间距，使用 border-spacing 属性来设置单元格之间的间距。</p>
<p><strong>示例: 调整表格间距和布局</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><!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; /* 自动居中 */
border-spacing: 0; /* 单元格之间的间距 */
}
th, td {
border: 1px solid #ddd;
padding: 12px; /* 单元格内边距 */
}
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>部门</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>开发工程师</td>
<td>技术部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>设计师</td>
<td>设计部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">数据来源：公司人力资源部</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="" height="381" src="https://img.jbzj.com/file_images/article/202409/202497101137084.png" width="1746" /></p>
<p>这个例子设置表格的宽度为页面宽度的 80%，并将表格居中显示，使用 border-spacing 属性来调整单元格之间的间距，并增加了单元格的内边距，使得内容更为舒适易读。</p>
<p class="maodian"><a name="_label2"></a></p><h2>三、简单的排版</h2>
<p class="maodian"><a name="_lab2_2_2"></a></p><h3>1、字体和文本对齐</h3>
<p>通过 CSS，我们可以控制表格中的字体和文本对齐方式，使其符合设计需求。</p>
<p><strong>示例: 表格排版样式</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><!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; /* 中央对齐 */
}
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>部门</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>开发工程师</td>
<td>技术部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>设计师</td>
<td>设计部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">数据来源：公司人力资源部</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="CSS 样式化表格——WEB开发系列24_html_02" height="1524" src="https://img.jbzj.com/file_images/article/202409/202497101203008.png" width="2559" /></p>
<p>示例中我们设置了字体样式为 Arial，并将单元格中的文本居中对齐，表头使用了更为显眼的颜色和加粗字体，使其更加突出。</p>
<p class="maodian"><a name="_lab2_2_3"></a></p><h3>2、颜色样式</h3>
<p>颜色不仅可以提升表格的视觉效果，还可以帮助突出关键信息。使用 CSS 可以轻松地为表格添加背景色、边框颜色等样式。</p>
<p><strong>示例: 表格颜色样式</strong></p>
<div class="jb51code"><pre class="brush:xhtml;"><!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>部门</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>开发工程师</td>
<td>技术部</td>
<td>￥8000</td>
</tr>
<tr>
<td>李四</td>
<td>设计师</td>
<td>设计部</td>
<td>￥7000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">数据来源：公司人力资源部</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="CSS 样式化表格——WEB开发系列24_html_06" height="363" src="https://img.jbzj.com/file_images/article/202409/202497101222340.png" width="1743" /></p>
<p>示例中我们使用了不同的背景颜色来区分奇数行和偶数行，同时设置了悬停效果的背景颜色，使得用户在浏览时更容易阅读和辨别数据。</p>
<p class="maodian"><a name="_label3"></a></p><h2>四、综合练习题</h2>
<p>下面我们自己动手来练习一下以下的两道题目吧：</p>
<p class="maodian"><a name="_lab2_3_4"></a></p><h3>题 1: 创建一个自定义的产品表格</h3>
<p>要求：</p>
<ol><li>创建一个产品表格，包含以下列：产品名、类别、价格和库存。</li><li>使用 CSS 样式化表格，确保表头使用醒目的颜色，表体交替行有不同的背景色，并添加悬停效果。</li><li>添加一个“总计”行，在表脚部分显示总产品数和库存总数。</li></ol>
<p>示例代码：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!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: 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>产品信息表</h1>
<table>
<thead>
<tr>
<th>产品名</th>
<th>类别</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔记本</td>
<td>电子产品</td>
<td>￥500</td>
<td>50</td>
</tr>
<tr>
<td>智能手机</td>
<td>电子产品</td>
<td>￥3000</td>
<td>20</td>
</tr>
<!-- 添加更多产品行 -->
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>70</td>
</tr>
</tfoot>
</table>
</body>
</html></pre></div>
<p class="maodian"><a name="_lab2_3_5"></a></p><h3>题 2: 设计一个学生成绩表格</h3>
<p>要求：</p>
<ol><li>创建一个学生成绩表格，包含以下列：学生姓名、科目、成绩。</li><li>使用 CSS 样式化表格，使表头具有背景色和白色文本，所有单元格的文本居中对齐，表格宽度设置为 100%。</li><li>添加一个行样式，当成绩低于 60 时，该行背景色为红色；当成绩在 60 到 80 之间时，背景色为黄色；当成绩在 80 以上时，背景色为绿色。</li></ol>
<p>示例代码：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!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;
}
th {
background-color: #2196F3;
color: white;
}
.low {
background-color: #ffcccc;
}
.medium {
background-color: #ffffcc;
}
.high {
background-color: #ccffcc;
}
</style>
</head>
<body>
<h1>学生成绩表</h1>
<table>
<thead>
<tr>
<th>学生姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr class="low">
<td>王五</td>
<td>数学</td>
<td>45</td>
</tr>
<tr class="medium">
<td>赵六</td>
<td>英语</td>
<td>75</td>
</tr>
<tr class="high">
<td>孙七</td>
<td>物理</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html></pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>总结</h2>
<p>在网页设计中,表格是展示数据不可少的元素,通过CSS,我们可以对表格进行美化和功能性强化,如设置边框、背景色、文本对齐和响应式布局等,以增强用户体验和数据的可读性,这不仅使表格结构化数据展示更加美观,还提升了实用性</p>
頁:
[1]