html中如何创建表格？表格制作详细教程

在网页开发中，表格是一个非常实用的元素，尤其适合展示数据类内容，比如价格表、成绩单、订单信息等等。HTML 提供了专门的标签来创建表格结构，掌握这些标签和基本用法，就能快速做出一个清晰的表格。

基本结构：table、tr、td 和 th

HTML 表格主要由以下几个标签组成：

示例代码如下：

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>单价</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>8999元</td>
      <td>50台</td>
    </tr>
    <tr>
      <td>手机</td>
      <td>3999元</td>
      <td>100部</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td></td>
      <td>150件</td>
    </tr>
  </tfoot>
</table>

这种结构不仅让 HTML 更清晰，也方便后续用 CSS 或 JavaScript 操作不同部分。

合并单元格：colspan 和 rowspan

有时候我们需要合并某些单元格，比如横向合并标题或纵向合并分类。这时可以用 colspan（横向合并）和 rowspan（纵向合并）属性。

举个例子，如果想让“个人信息”横跨两列：

<table border="1">
  <tr>
    <th colspan="2">个人信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>张三</td>
  </tr>
</table>

效果就是“个人信息”这一格会占据两个单元格宽度。

如果是纵向合并，比如某一行的某一列需要跨越两行：

<tr>
  <td rowspan="2">左侧内容</td>
  <td>右侧内容1</td>
</tr>
<tr>
  <td>右侧内容2</td>
</tr>

注意：合并单元格虽然功能强大，但要谨慎使用，避免结构混乱，影响阅读体验。

基本上就这些内容了。表格制作本身不复杂，但细节容易忽略，特别是结构嵌套和样式控制。只要按照规范写好标签，再配合一点 CSS，就能做出清晰美观的数据表格。

文中关于html,表格的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《html中如何创建表格？表格制作详细教程》文章吧，也可关注golang学习网公众号了解相关技术文章。

怎样用JavaScript处理Promise的链式调用？

上一篇

怎样用JavaScript处理Promise的链式调用？

下一篇

HTML如何存储数据？data-*属性有什么作用？

密码登录在这里

微信扫码登录或注册

打开微信扫一扫，快速登录/注册

登录即同意 用户协议 和 隐私政策

微信登录更方便

• 密码登录
• 注册账号

忘记密码

登录

注册

登录即同意 用户协议 和 隐私政策

返回登录

• 重置密码

发送验证码

重置密码

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

<table border="1">
  ...
</table>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>