HTML表格如何制作_HTML表格TABLE标签创建步骤-html教程-PHP中文网

HTML表格如何制作_HTML表格TABLE标签创建步骤

絕刀狂花

发布： 2025-10-11 10:45:01

原创

1092人浏览过

答案：创建HTML表格需使用table、tr、td和th标签，首先用<table>定义表格容器，再用<tr>创建行，在行中用<th>定义表头单元格、<td>定义数据单元格，最后可通过CSS设置边框与样式以提升外观。

html表格如何制作_html表格table标签创建步骤

制作HTML表格主要使用table标签，配合tr、td和th等标签来构建行、列和表头。下面介绍创建HTML表格的详细步骤。

1. 使用TABLE标签定义表格

每个HTML表格都以<table>开始，以</table>结束。这是所有表格内容的容器。

示例：

<table>
  <!-- 表格内容写在这里 -->
</table>

登录后复制

2. 使用TR标签创建表格行

每一行使用<tr>（table row）标签定义。表格有多少行，就需要多少个tr标签。

示例：

<table>
  <tr></tr> <!-- 第一行 -->
  <tr></tr> <!-- 第二行 -->
</table>

登录后复制

3. 使用TD和TH标签添加单元格

在每一行中，用<td>（table data）表示普通单元格，用<th>（table header）表示表头单元格。表头通常加粗并居中显示。

立即学习“前端免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

说明：

td用于数据单元格
th用于标题单元格，常放在第一行或第一列

完整示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

登录后复制

4. 可选：添加边框和其他样式

虽然border属性可以在HTML中设置边框（如border="1"），但推荐使用CSS进行样式控制，更灵活且符合现代开发规范。

使用CSS设置边框示例：

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

登录后复制

基本上就这些。掌握table、tr、td和th四个基本标签，就能创建结构清晰的HTML表格。不复杂但容易忽略细节，比如闭合标签和合理使用表头。

以上就是HTML表格如何制作_HTML表格TABLE标签创建步骤的详细内容，更多请关注php中文网其它相关文章！