CSS基础教程（十五）Table(表格)：告别土味Excel风！CSS表格的终极整容手册：从呆板到惊艳，只需5步！

原创 于 2025-09-11 08:06:29 发布 · 360 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #excel #前端

引言：表格的“前世今生”与我们的“整容大计”

在Web世界的远古时代，<table>标签曾是构建整个页面布局的“万金油”，那是一个被“盒子嵌套盒子”支配的混沌岁月。时过境迁，虽然布局的江山早已让位给Flexbox和Grid，但<table>在其本职工作中——展示行列规整的数据——依然是无可替代的王者。

然而，很多开发者对表格的样式设计还停留在简单的border="1"阶段，做出的表格仿佛直接从Excel里复制粘贴而来，与现代精美的网页设计格格不入。

今天，我们就来启动这场对HTML表格的“终极整容大计”。我们不止于浅尝辄辄的“涂脂抹粉”，而是要深入骨骼，用CSS这把手术刀，从结构、样式、交互、响应式四个维度，彻底重塑表格的视觉表现与用户体验。准备好你的代码编辑器，我们要开始了！

第一章：基础复盘——表格的“骨骼解剖”

在施展魔法前，我们必须先了解它的基本结构。一个语义化良好的表格是一切美化的基础。

<table>
  <caption>2023年度部门绩效考核表</caption> <!-- 表格标题 -->
  <thead>                                   <!-- 表头 -->
    <tr>                                    <!-- 行 -->
      <th scope="col">部门</th>             <!-- 列标题 -->
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>                                   <!-- 表格主体 -->
    <tr>
      <th scope="row">研发部</th>           <!-- 行标题 -->
      <td>优秀</td>                         <!-- 单元格 -->
      <td>良好</td>
      <td>卓越</td>
      <td>优秀</td>
    </tr>
    <tr>
      <th scope="row">市场部</th>
      <td>良好</td>
      <td>合格</td>
      <td>优秀</td>
      <td>卓越</td>
    </tr>
  </tbody>
  <tfoot>                                   <!-- 表脚 -->
    <tr>
      <th scope="row">年度平均</th>
      <td>良好</td>
      <td>良好</td>
      <td>优秀</td>
      <td>优秀</td>
    </tr>
  </tfoot>
</table>
  • <caption>: 表格的标题，对可访问性非常重要。
  • <thead>, <tbody>, <tfoot>: 将表格分成逻辑部分，便于分别样式化。
  • <th>: 标题单元格，通常加粗居中。scope属性帮助屏幕阅读器理解标题范围。
  • <td>: 标准数据单元格。
第二章：核心CSS属性——给你的表格“换肤美颜”

现在，我们请出CSS这位“顶级整形师”。

1. border-collapse： 解决“社交距离”问题
默认情况下，表格单元格之间有尴尬的间隙（border-collapse: separate）。只需一行代码，就能让它们紧密相连，边框合二为一，瞬间精致起来。
table {
  border-collapse: collapse; /* 合并边框，神器！ */
  /* border-collapse: separate; */ /* 默认值，边框分离 */
  width: 100%; /* 让表格充满容器 */
}
2. nth-child()： 施展“隔行换色”魔法
让表格行或列交替显示不同背景色，极大提升了数据的可读性。
tbody tr:nth-child(odd) { /* 选中所有奇数行 */
  background-color: #f8f9fa; /* 浅灰色背景 */
}
tbody tr:nth-child(even) { /* 选中所有偶数行 */
  background-color: #e9ecef; /* 稍深一点的灰色背景 */
}

/* 如果想对列操作，可以这样 */
td:nth-child(3),
th:nth-child(3) {
  background-color: #fff3cd; /* 高亮第三列 */
}
3. :hover： 添加“指尖流光”交互

当用户鼠标悬停在行上时，改变背景色，提供清晰的视觉反馈。

tbody tr:hover {
  background-color: #d1ecf1; /* 悬停时的蓝色背景 */
  transition: background-color 0.2s ease; /* 添加平滑过渡效果 */
}
4. 文字与间距： “内涵”与“气质”的提升

调整文字对齐、内边距，是提升表格专业感的关键。

th, td {
  padding: 12px 15px; /* 舒适的单元格内边距 */
  text-align: left; /* 文字左对齐，数字通常右对齐 */
  border-bottom: 1px solid #dee2e6; /* 仅底部边框，清爽风格 */
}

th {
  background-color: #343a40; /* 深色表头 */
  color: white;
  font-weight: bold;
}

tfoot th,
tfoot td {
  border-top: 2px solid #343a40; /* 表脚顶部加粗边框 */
  font-weight: bold;
}
第三章：高级整容术——从“好用”到“惊艳”
1. 固定表头（Sticky Header）： 永不消失的“领导者”

当表格数据很长需要滚动时，固定表头是提升用户体验的利器。

thead th {
  position: sticky;
  top: 0; /* 粘在距离顶部0px的位置 */
  z-index: 10; /* 确保表头在滚动时盖住下面的行 */
}
/* 注意： sticky生效的前提是表格的父容器有高度且允许滚动（overflow） */
2. 响应式表格： 在小屏幕上的“优雅变形”

在手机等窄屏设备上，横向滚动体验很差。我们可以将其变形为卡片式布局。

@media screen and (max-width: 768px) {
  /* 将表格块级元素特性清除 */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* 隐藏表头行（但不是用display:none，为了可访问性） */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
  }
  
  td {
    /* 使每个td像卡片中的一行 */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* 为伪元素标签留出空间 */
  }
  
  td:before {
    /* 使用data-label属性或CSS计数器模拟表头 */
    content: attr(data-label); /* 需要在HTML中给td添加data-label="Q1"属性 */
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
}
第四章：完整示例——一个现成的“整容模板”

下面是一个融合了上述所有技巧的完整示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS表格整容成果展示</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 2rem;
      background-color: #f5f5f5;
    }

    .table-container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      overflow-x: auto; /* 防止桌面端表格过宽时溢出 */
    }

    table {
      width: 100%;
      border-collapse: collapse;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 细微的阴影提升层次感 */
    }

    caption {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #333;
      text-align: left;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
    }

    thead {
      background-color: #2c3e50;
      color: #ecf0f1;
    }

    thead th {
      position: sticky;
      top: 0;
    }

    tbody tr {
      border-bottom: 1px solid #dddddd;
    }

    tbody tr:nth-of-type(even) {
      background-color: #f8f9fa;
    }

    tbody tr:last-of-type {
      border-bottom: 2px solid #2c3e50;
    }

    tbody tr:hover {
      background-color: #d6d8d9;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    tfoot {
      font-weight: bold;
      color: #2c3e50;
    }

    tfoot td {
      border-top: 2px solid #2c3e50;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .table-container {
        padding: 0.5rem;
      }
      table {
        display: block;
        width: 100%;
      }
      thead, tbody, tfoot, tr {
        display: block;
      }
      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      tr {
        margin-bottom: 1rem;
        border: 1px solid #ccc;
      }
      td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #eee;
      }
      td::before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #2c3e50;
      }
    }
  </style>
</head>
<body>
  <div class="table-container">
    <table>
      <caption>公司项目进度一览表</caption>
      <thead>
        <tr>
          <th scope="col">项目名称</th>
          <th scope="col">负责人</th>
          <th scope="col">状态</th>
          <th scope="col">截止日期</th>
          <th scope="col">完成度</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="项目名称">星火计划官网重构</td>
          <td data-label="负责人">张三</td>
          <td data-label="状态"><span style="color: green;">✅ 已完成</span></td>
          <td data-label="截止日期">2023-10-15</td>
          <td data-label="完成度">100%</td>
        </tr>
        <tr>
          <td data-label="项目名称">黎明DLC开发</td>
          <td data-label="负责人">李四</td>
          <td data-label="状态"><span style="color: orange;">⏳ 进行中</span></td>
          <td data-label="截止日期">2023-12-20</td>
          <td data-label="完成度">75%</td>
        </tr>
        <tr>
          <td data-label="项目名称"> Atlas 数据分析平台</td>
          <td data-label="负责人">王五</td>
          <td data-label="状态"><span style="color: blue;">🔍 测试中</span></td>
          <td data-label="截止日期">2023-11-05</td>
          <td data-label="完成度">90%</td>
        </tr>
        <tr>
          <td data-label="项目名称">天穹系统迁移</td>
          <td data-label="负责人">赵六</td>
          <td data-label="状态"><span style="color: red;">❌ 延期</span></td>
          <td data-label="截止日期">2023-09-30</td>
          <td data-label="完成度">60%</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4" data-label="">平均完成度</td>
          <td data-label="平均完成度">81.25%</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>
第五章：超越传统——用Div/CSS Grid模拟表格

虽然HTML Table是正解，但有时为了极致的布局灵活性，我们会用<div>或CSS Grid来模拟表格行为。这提供了更大的控制力（比如轻松调整单元格垂直对齐方式），但牺牲了天然的语义化和可访问性，需手动添加ARIA角色。

.grid-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列 */
  border: 1px solid #ddd;
}

.grid-header {
  grid-column: 1 / -1; /* 占满整行 */
  display: grid;
  grid-template-columns: subgrid; /* 子网格，继承父网格列线 */
  background: #343a40;
  color: white;
  font-weight: bold;
}

.grid-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.grid-cell {
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
}
结语

CSS为我们提供了无比强大的工具集，足以将最朴素的HTML表格转变为既美观又实用、既专业又充满交互性的数据展示中心。关键在于大胆尝试、细心调整。记住，一个好的表格设计，不仅能清晰传达信息，更能成为整个页面设计的亮点。

现在，就拿起你的CSS手术刀，去拯救那些还在“土味”边缘挣扎的表格吧！

css 细线表格 css制作table细线表格常用属性
12-13
在CSS中创建细线表格是网页设计中一个常见的需求，主要目的是为了使表格看起来更加整洁、专业。在本文中，我们将深入探讨如何使用CSS来实现这样的效果，特别是通过`border-collapse`属性和边框属性缩写技巧。 1. **...
CSS教程,CSS固定表头的HTML表格
12-09
用CSS实现的固定表头的HTML表格。 曾经在项目中实现过一个固定表头的HTML表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格，其简化代码如下： <...
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
CSS-table表格
qq_54282411的博客
06-15 1890
一、表格的创建 表格由<table>开始,</table>结束。除此之外还需要行元素<tr>和单元格元素<td> 语法格式： <table> <tr> <td>单元格内的文字</td> …… </tr> …… </table> 解释： <table></table>：用于定义一个表格 <tr></tr>：用于定义
CSS Table
JunChow
05-29 647
表格布局有两种使用方式，一种是使用HTML提供的table标签，一种是使用CSS提供的display:table属性。CSS提供的display:table属性主要为表设置表格布局算法，CSS Table实际上是使用CSS属性模仿HTML Table的布局模型。 HTML Table是包含语义化的标签，它描述了什么是数据，因此最好是用于标记那些需要制表的数据，比如财务信息表。如果数据能够以电子表格...
CSS Table（表格）
隔壁小王的博客
03-20 9375
**首先介绍表格标签**一个完整的表格示例如下<table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table>table标签：表格 tr标签：表格中的每一行 th标
HTML表格标记教程(48):CSS修饰表格
01-19
现在我们来看看怎样巧妙运用css语法美化表格。 注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。 例一：1px表格 很多人热衷于制作1px表格，于是发明了各式各样的方法，用css做...
CSS 样式化表格：从基础到高级技巧
engchina的专栏
01-31 1649
CSS 样式化表格：从基础到高级技巧
CSS 表格table：HTML 表格从基础结构到复杂样式
最新发布
waterlin2011的博客
05-24 1066
掌握这些基础属性和实战技巧，即使是复杂的数据表格也能轻松驾驭。
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
CSS样式Table[2] - CSS3Tables
11-29
CSS样式Table - CSS3Tables
CSS 之 table 表格布局
热门推荐
weixin_45092437的博客
10-09 1万+
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
【CSS表格table】
魔术师
06-10 1316
【CSS表格table】 表格（table）是什么？做什么用的？ 表格主要用于向用户呈现数据，尽量不要用于布局。 表格（table）的基本元素 caption：元素定义表格标题； thead：标签定义表格的表头； tbody：标签表格主体（正文）； tfoot：标签定义表格的页脚（脚注或表注）；
【CSS 表格属性（Table）】
Hey_Coder
11-26 5842
CSS 表格属性 Tableborder-collapse 属性border-spacing 属性caption-side 属性empty-cells 属性table-layout 属性 用于 属性名 CSS 版本 合并 表格边框。 border-collapse 2 相邻 单元格边框 之间的 距离。 border-spacing 2 表格标题的 位置。 caption-...
CSS表格table
荣华的博客
08-20 235
表格table 表格边框 border 表格的边框属性同CSS盒子模型的属性 表格的th/td都有独立的边框，表格也默认有一个边框，所有默认的表格有双边框 如果要让表格折叠为一个单一的边框或隔开（默认），可以使用border-collapse属性 border-collapse:collapse; 折叠 border-collapse:separate; 隔开 表格文字对齐...
Table布局
WindRunnerMax
04-07 1727
Table布局 <table>最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table>来布局。 实例 实现一个简单的布局，将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用，如果布局复杂，可以在单元格中再嵌套表格，单元格中的元素或者嵌套的表格用a...
CSS Table (表格)
froginwe11的博客
03-16 639
CSS表格在Web开发中具有重要作用，通过合理的CSS样式设置和布局技巧，我们可以打造出美观、易读的表格。同时，注意SEO优化，使表格内容更容易被搜索引擎收录和排名。希望本文能对您在CSS表格设计方面有所帮助。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

值引力

持续创作，多谢支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值