登录
首页 >  文章 >  前端

HTML表格代码怎么写｜table标签制作简单表格教程

时间：2026-05-23 14:15:21 180浏览 收藏

HTML表格看似简单，实则暗藏陷阱：错位、边框消失、对齐异常等问题往往并非代码写错，而是源于浏览器默认样式的干扰和嵌套结构的不规范——必须严格使用``包裹``、再由`
`或``填充，禁止单独嵌套；边框需靠CSS显式设置`border`并启用`border-collapse: collapse`才能消除双线间隙；文字对齐应优先利用``的语义居中与加粗特性，并通过父级`text-align`统一控制而非逐个设置，避免滥用已废弃的HTML属性。掌握这些底层逻辑，比死记标签更能高效写出稳定、可维护的表格。

html表格代码怎么写_html制作简单表格table标签用法

标签本身不难，但实际写出来经常错位、边框消失、文字对不齐——核心问题不在会不会写，而在默认样式干扰和嵌套逻辑没理清。

表格基本结构必须包含

、 是必须的，
或

很多人只写

姓名
，浏览器会尝试“修复”，但结果不可控。真实渲染依赖严格的行容器：
（普通单元格）和 （表头单元格，自带加粗+居中）不能直接挂在 下。

正确写法示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>
列数计算错乱
  • 空单元格别留空白，写
    • 或 都行，但不要只换行不写标签

    没有边框？不是代码错，是 CSS 默认把边框设为 0

    写了

    建议只用于第一行或首列，语义上表示标题，屏幕阅读器会识别
  • 少用 colspan/rowspan 初期，容易导致后续
    •  
    却看不到线，不是 HTML 错了，是浏览器默认 border: 0 + border-collapse: separate。想立刻看到边框，最简方式是在
    上加内联样式：

    <table style="border: 1px solid #000; border-collapse: collapse;">
    • border-collapse: collapse 让相邻边框合并，否则会出现双线间隙
    • 单独给
    标签配合 class 控制（进阶但更干净）
  • 避免用
    或 align="center" 属性，HTML5 已废弃

    • 真正麻烦的不是写几行

    加 border 也行，但必须每格都加，且 collapse 才能统一
  • 现代项目建议用外部 CSS 控制，但调试阶段内联最直觉

    • 文字靠左/居中不对？优先查 text-align 和

    		的默认行为

    		默认 text-align: center， 默认 left。如果整表要居中，别在每个 上重复写样式，改父级：

    <table style="text-align: center;">
    • 这个设置会被
    		继承，所以表头依然居中，内容也居中了
  • 若只要某列右对齐（比如数字列），给该列所有
    		• 加 style="text-align: right;"，或者用
    ，而是后期加样式时发现 、是否 border-collapse 没生效，比重写整个表格更快。

    好了，本文到此结束，带大家了解了《HTML表格代码怎么写｜table标签制作简单表格教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

    的加粗和居中和你想要的排版冲突，或者合并单元格后某一行突然多出空隙——这时候回看是否漏了
    资料下载
    相关阅读
    更多>
    最新阅读
    更多>
    课程推荐
    更多>
    • 前端进阶之JavaScript设计模式
      前端进阶之JavaScript设计模式
      设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
      立即学习 543次学习
    • GO语言核心编程课程
      GO语言核心编程课程
      本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
      立即学习 516次学习
    • 简单聊聊mysql8与网络通信
      简单聊聊mysql8与网络通信
      如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
      立即学习 500次学习
    • JavaScript正则表达式基础与实战
      JavaScript正则表达式基础与实战
      在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
      立即学习 487次学习
    • 从零制作响应式网站—Grid布局
      从零制作响应式网站—Grid布局
      本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
      立即学习 485次学习