上一篇
怎么用HTML快速创建表格？
使用HTML创建表格需借助`
标签定义表格结构，
创建行，
填充单元格数据，`设置表头标题，通过嵌套组合这些标签，可自由定义行列布局与内容，实现数据清晰展示。
如何用HTML创建表格 – 详细指南
下面是一个完整的HTML表格创建教程，包含代码示例、样式设计和响应式布局：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML表格创建完全指南 | 前端开发教程</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 40px 20px;
background: linear-gradient(120deg, #1a2980, #26d0ce);
color: white;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.8rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.subtitle {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
}
.card {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.card h2 {
color: #1a2980;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #26d0ce;
display: flex;
align-items: center;
}
.card h2 i {
margin-right: 12px;
color: #26d0ce;
}
.code-block {
background: #2d3748;
color: #e2e8f0;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
overflow-x: auto;
margin: 20px 0;
position: relative;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #4a5568;
}
.code-title {
font-weight: 600;
color: #63b3ed;
}
.copy-btn {
background: #4a5568;
color: white;
border: none;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.copy-btn:hover {
background: #63b3ed;
}
.code-block code {
display: block;
line-height: 1.5;
}
.example-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.example-table thead tr {
background: linear-gradient(120deg, #1a2980, #26d0ce);
color: white;
}
.example-table th,
.example-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.example-table tbody tr {
transition: background 0.2s;
}
.example-table tbody tr:nth-child(even) {
background: #f8fafc;
}
.example-table tbody tr:hover {
background: #ebf8ff;
}
.example-table tfoot {
background: #edf2f7;
font-weight: bold;
}
.tip {
background: #ebf8ff;
border-left: 4px solid #3182ce;
padding: 15px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.tip-title {
color: #3182ce;
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.tip-title i {
margin-right: 10px;
}
.best-practices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.practice {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
border-top: 3px solid #26d0ce;
}
.practice h3 {
color: #1a2980;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.practice h3 i {
margin-right: 10px;
color: #26d0ce;
}
footer {
text-align: center;
margin-top: 50px;
padding: 30px;
background: #1a2980;
color: white;
border-radius: 15px;
}
.references {
text-align: left;
max-width: 800px;
margin: 20px auto 0;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
.references h3 {
margin-bottom: 15px;
text-align: center;
}
.references ul {
list-style: none;
}
.references li {
margin-bottom: 10px;
padding-left: 25px;
position: relative;
}
.references li:before {
content: "•";
position: absolute;
left: 10px;
color: #26d0ce;
font-size: 1.2rem;
}
.note {
color: #e53e3e;
font-weight: 600;
margin-top: 5px;
}
.highlight {
color: #3182ce;
font-weight: 600;
}
@media (max-width: 600px) {
h1 {
font-size: 2.2rem;
}
.card {
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<h1><i class="fas fa-table"></i> HTML表格创建完全指南</h1>
<p class="subtitle">从基础到高级技巧，掌握创建专业、美观且响应式HTML表格的方法</p>
</header>
<div class="container">
<div class="card">
<h2><i class="fas fa-bricks"></i> HTML表格基础</h2>
<p>HTML表格使用<code class="highlight"><table></code>标签创建，由行<code class="highlight"><tr></code>和单元格<code class="highlight"><td></code>组成，表头单元格使用<code class="highlight"><th></code>标签。</p>
<div class="code-block">
<div class="code-header">
<div class="code-title">基础表格结构</div>
<button class="copy-btn">复制代码</button>
</div>
<code>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
</tr>
</table>
</code>
</div>
<div class="tip">
<div class="tip-title"><i class="fas fa-lightbulb"></i> 专业提示</div>
<p>始终为表头使用<code><th></code>标签而不是<code><td></code>，这不仅能增强语义化，还能提升可访问性。</p>
</div>
<table class="example-table">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><code><table></code></td>
<td>定义表格容器</td>
</tr>
<tr>
<td><code><tr></code></td>
<td>定义表格行</td>
</tr>
<tr>
<td><code><th></code></td>
<td>定义表头单元格（加粗居中）</td>
</tr>
<tr>
<td><code><td></code></td>
<td>定义标准单元格</td>
</tr>
</table>
</div>
<div class="card">
<h2><i class="fas fa-layer-group"></i> 表格高级结构</h2>
<p>专业表格应使用结构化元素：<code class="highlight"><thead></code>、<code class="highlight"><tbody></code>和<code class="highlight"><tfoot></code>。</p>
<div class="code-block">
<div class="code-header">
<div class="code-title">结构化表格示例</div>
<button class="copy-btn">复制代码</button>
</div>
<code>
<table>
<caption>2025年销售报告</caption>
<thead>
<tr>
<th scope="col">季度</th>
<th scope="col">产品A</th>
<th scope="col">产品B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>$20,000</td>
<td>$15,000</td>
</tr>
<!-- 更多行 -->
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td>$95,000</td>
<td>$78,000</td>
</tr>
</tfoot>
</table>
</code>
</div>
<table class="example-table">
<caption>表格结构元素说明</caption>
<thead>
<tr>
<th>元素</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><thead></code></td>
<td>定义表头部分（包含列标题）</td>
</tr>
<tr>
<td><code><tbody></code></td>
<td>定义表格主体内容</td>
</tr>
<tr>
<td><code><tfoot></code></td>
<td>定义表格页脚（总计、摘要等）</td>
</tr>
<tr>
<td><code><caption></code></td>
<td>为表格提供标题或说明</td>
</tr>
</tbody>
</table>
<div class="tip">
<div class="tip-title"><i class="fas fa-universal-access"></i> 可访问性提示</div>
<p>使用<code>scope="col"</code>和<code>scope="row"</code>属性帮助屏幕阅读器理解表格结构。</p>
</div>
</div>
<div class="card">
<h2><i class="fas fa-expand-alt"></i> 单元格合并技术</h2>
<p>使用<code class="highlight">colspan</code>和<code class="highlight">rowspan</code>属性可以合并单元格，创建复杂表格布局。</p>
<div class="code-block">
<div class="code-header">
<div class="code-title">合并单元格示例</div>
<button class="copy-btn">复制代码</button>
</div>
<code>
<table>
<tr>
<th rowspan="2">部门</th>
<th colspan="2">2025年业绩</th>
</tr>
<tr>
<th>Q1-Q2</th>
<th>Q3-Q4</th>
</tr>
<tr>
<td>市场部</td>
<td>$120,000</td>
<td>$150,000</td>
</tr>
</table>
</code>
</div>
<table class="example-table" style="margin-top: 25px;">
<tr>
<th rowspan="2">部门</th>
<th colspan="2">2025年业绩</th>
</tr>
<tr>
<th>Q1-Q2</th>
<th>Q3-Q4</th>
</tr>
<tr>
<td>市场部</td>
<td>$120,000</td>
<td>$150,000</td>
</tr>
<tr>
<td>技术部</td>
<td>$95,000</td>
<td>$110,000</td>
</tr>
</table>
<div class="tip">
<div class="tip-title"><i class="fas fa-exclamation-triangle"></i> 重要提示</div>
<p>过度使用单元格合并会使表格难以维护且降低可访问性，仅在必要时使用，并确保提供替代文本说明。</p>
</div>
</div>
<div class="card">
<h2><i class="fas fa-paint-brush"></i> 使用CSS美化表格</h2>
<p>通过CSS可以显著提升表格的视觉效果和用户体验。</p>
<div class="code-block">
<div class="code-header">
<div class="code-title">基础表格样式</div>
<button class="copy-btn">复制代码</button>
</div>
<code>
/* 基础表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
th {
background-color: #1a2980;
color: white;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
tr:hover {
background-color: #e6f7ff;
}
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
caption-side: top;
}
</code>
</div>
<div class="tip">
<div class="tip-title"><i class="fas fa-mobile-alt"></i> 响应式设计</div>
<p>对于移动设备，可以使用以下技术实现响应式表格：</p>
<ul style="padding-left: 25px; margin-top: 10px;">
<li>水平滚动容器</li>
<li>在小屏幕上将表格转换为卡片布局</li>
<li>隐藏
