登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > HTML如何制作简单价格表

HTML如何制作简单价格表

2026-05-12 19:27:33 0浏览 收藏
本文深入讲解如何用原生HTML表格（table）高效、规范地制作简洁可靠的价格表，强调语义化结构（正确使用thead、tbody、th、td及scope属性）、关键CSS控制（border-collapse、padding、min-width、overflow-x实现移动端横向滚动）以及坚决避免过早引入JavaScript带来的稳定性风险；文章直击开发者常见误区，从可访问性、SEO、响应式表现到细节一致性（如价格单位、小数位、非数字项标注），提供即学即用的实战原则与避坑指南。

HTML中如何制作一个简单的价格表

用 写价格表最直接

浏览器原生支持、语义清晰、手机上也能靠 CSS 控制横向滚动，不用额外 JS 库。别一上来就用 div 堆网格——那是自找麻烦。

关键点：

放标题行， 放数据行，每列用
或 ，别漏掉 scope 属性（比如 ），这对屏幕阅读器和 SEO 都有实际影响。

示例结构：

<table>
  <thead>
    <tr>
      <th scope="col">服务</th>
      <th scope="col">基础版</th>
      <th scope="col">专业版</th>
      <th scope="col">旗舰版</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">存储空间</th>
      <td>10 GB</td>
      <td>50 GB</td>
      <td>200 GB</td>
    </tr>
    <tr>
      <th scope="row">月费</th>
      <td>$9</td>
      <td>$24</td>
      <td>$49</td>
    </tr>
  </tbody>
</table>

CSS 控制价格表样式时优先处理三件事

纯 HTML 表格默认丑，但改起来不难。重点不是“怎么好看”，而是“怎么不崩”：

  • 给 table 加 border-collapse: collapse，否则边框双线难看又占空间
  • 所有 th 和 td 必须设 padding，不然文字贴边，移动端尤其难受
  • 用 min-width 限制列宽（比如 th:nth-child(2) { min-width: 120px; }），防止小屏下文字挤成一团或换行错位
  • 如果某列要居中价格数字，用 text-align: center，别用
    或空格硬对齐

响应式差的常见表现和解法

用户在手机上看价格表时最常遇到：横向滚动失效、文字被截断、按钮点不到——基本都出在没控制容器宽度或忘了 overflow-x。

实操建议：