上一篇
在HTML中创建表格需使用标签，内部用定义行，定义普通单元格，定义表头单元格，可结合、//分组结构，通过CSS控制样式。
HTML 表格制作完全指南：从入门到专业应用
在网页开发中,表格是展示结构化数据的核心工具，无论展示价格清单、数据报表还是产品对比，掌握HTML表格技术至关重要，下面详细介绍专业级的表格创建方法。
基础表格结构
<table>
<tr>
<th>产品</th>
<th>价格</th>
<th>库存</th>
</tr>
<tr>
<td>无线耳机</td>
<td>¥299</td>
<td>85件</td>
</tr>
<tr>
<td>蓝牙音箱</td>
<td>¥459</td>
<td>42件</td>
</tr>
</table>
图示：使用
| 和 | 创建的基础数据表格 专业表格功能扩展表头分组<table>
<thead>
<tr>
<th colspan="2">产品详情</th>
<th colspan="2">销售信息</th>
</tr>
<tr>
<th>名称</th>
<th>分类</th>
<th>价格</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<tr>
<td>机械键盘</td>
<td>外设</td>
<td>¥599</td>
<td>120件</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>320件</td>
</tr>
</tfoot>
</table> 行列合并技术<table>
<tr>
<th rowspan="2">季度</th>
<th colspan="2">销售额</th>
</tr>
<tr>
<th>线上</th>
<th>线下</th>
</tr>
<tr>
<td>Q1</td>
<td>¥128,000</td>
<td>¥89,500</td>
</tr>
</table> 响应式表格解决方案<div class="table-responsive">
<table>
<!-- 宽表格内容 -->
</table>
</div>
<style>
.table-responsive {
overflow-x: auto;
max-width: 100%;
}
</style> 专业样式设计table {
width: 100%;
border-collapse: collapse;
font-family: 'Segoe UI', Arial, sans-serif;
}
th {
background-color: #2c7be5;
color: white;
padding: 12px 15px;
text-align: left;
}
td {
padding: 10px 15px;
border-bottom: 1px solid #e0e6ef;
}
tr:nth-child(even) {
background-color: #f9fafc;
}
tr:hover {
background-color: #edf2ff;
}
caption {
font-weight: bold;
margin-bottom: 10px;
caption-side: bottom;
} 高级功能实现带排序功能的表格： <table>
<thead>
<tr>
<th onclick="sortTable(0)">名称 ▲▼</th>
<th onclick="sortTable(1)">价格 ▲▼</th>
</tr>
</thead>
<!-- 表格内容 -->
</table>
<script>
function sortTable(column) {
// JavaScript排序逻辑
}
</script> 可访问性增强： <table aria-describedby="tableDesc">
<caption id="tableDesc">
2025年产品库存统计表
</caption>
<!-- 表格内容 -->
</table> 最佳实践建议
|
|---|
