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

html表格代码如何写_html制作简单表格table标签用法的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

表格错位、边框消失、对齐异常的根源在于默认样式干扰和嵌套结构错误；必须用<tr>包裹<td>/<th>，禁止单独嵌套，且需用CSS设置border和border-collapse:collapse，并区分<th>（居中加粗）与<td>（左对齐）的语义及样式。

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

表格基本结构必须包含 <tr>、<td> 或 <th>

很多人只写 <table><td>姓名</td></table>，浏览器会尝试“修复”，但结果不可控。真实渲染依赖严格的行容器：<tr> 是必须的，<td>（普通单元格）和 <th>（表头单元格，自带加粗+居中）不能直接挂在 <table> 下。

正确写法示例：

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

1. <th> 建议只用于第一行或首列，语义上表示标题，屏幕阅读器会识别
2. 少用 colspan/rowspan 初期，容易导致后续 <tr> 列数计算错乱
3. 空单元格别留空白，写 <td> </td> 或 <td></td> 都行，但不要只换行不写标签

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

写了 <table> 却看不到线，不是 HTML 错了，是浏览器默认 border: 0 + border-collapse: separate。想立刻看到边框，最简方式是在 <table> 上加内联样式：

<table style="border: 1px solid #000; border-collapse: collapse;">

1. border-collapse: collapse 让相邻边框合并，否则会出现双线间隙
2. 单独给 <td> 加 border 也行，但必须每格都加，且 collapse 才能统一
3. 现代项目建议用外部 CSS 控制，但调试阶段内联最直觉

文字靠左/居中不对？优先查 text-align 和 <th> 的默认行为

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

<table style="text-align: center;">

1. 这个设置会被 <th> 继承，所以表头依然居中，内容也居中了
2. 若只要某列右对齐（比如数字列），给该列所有 <td> 加 style="text-align: right;"，或者用 <col> 标签配合 class 控制（进阶但更干净）
3. 避免用 <center> 或 align="center" 属性，HTML5 已废弃

真正麻烦的不是写几行 <table>，而是后期加样式时发现 <th> 的加粗和居中和你想要的排版冲突，或者合并单元格后某一行突然多出空隙——这时候回看是否漏了 <tr>、是否 border-collapse 没生效，比重写整个表格更快。