div css制作表格：用div和CSS制作表格，语义化布局的完美选择

来源：网络作者：日期：2025-11-07 12:46:06

在现代网页设计中，表格布局已经逐渐被语义化的div+CSS布局所取代，本文将详细介绍如何使用div和CSS来创建各种样式的表格,以及这种方法相比传统table标签的优势。

为什么要用div+CSS制作表格？

传统table标签虽然适合展示数据，但其语义化程度不高，主要被设计用来实现页面布局，而div+CSS表格则具有以下优势：

更好的语义化支持
灵活的样式控制
响应式设计友好
无障碍访问支持更好

实现方法

基本结构

<div class="table-container">
  <div class="table-row">
    <div class="table-cell">单元格1</div>
    <div class="table-cell">单元格2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">单元格3</div>
    <div class="table-cell">单元格4</div>
  </div>
</div>

CSS样式

.table-container {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.table-cell:nth-child(odd) {
  background-color: #f2f2f2;
}
.table-header {
  background-color: #4CAF50;
  color: white;
}

高级样式实现

表头样式

.table-header {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

响应式设计

@media screen and (max-width: 600px) {
  .table-container {
    display: block;
    overflow-x: auto;
  }
}

复杂表格样式

/* 表格边框 */
.table-container {
  border: 2px solid #ddd;
}
/* 单元格合并 */
.table-cell:first-child {
  width: 30%;
}
.table-cell:last-child {
  width: 70%;
}

实际应用示例

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
  display: table;
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
.table-header {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}
.table-footer {
  background-color: #f8f8f8;
  font-weight: bold;
}
.table-container tr:nth-child(even) {
  background-color: #f2f2f2;
}
.table-container tr:hover {
  background-color: #ddd;
}
</style>
</head>
<body>
<div class="table-container">
  <div class="table-row">
    <div class="table-cell table-header">姓名</div>
    <div class="table-cell table-header">年龄</div>
    <div class="table-cell table-header">职业</div>
  </div>
  <div class="table-row">
    <div class="table-cell">张三</div>
    <div class="table-cell">25</div>
    <div class="table-cell">工程师</div>
  </div>
  <div class="table-row">
    <div class="table-cell">李四</div>
    <div class="table-cell">30</div>
    <div class="table-cell">设计师</div>
  </div>
  <div class="table-row table-footer">
    <div class="table-cell">总计</div>
    <div class="table-cell">55</div>
    <div class="table-cell">-</div>
  </div>
</div>
</body>
</html>