HTML表格的基本制作_HTML table/tr/td表格创建与基础样式设置

技术教程
2025-10-14 15:28:02

使用table、tr、td和th标签构建HTML表格，通过CSS设置边框、间距、背景色和对齐方式可提升可读性与美观度。

html表格的基本制作_html table/tr/td表格创建与基础样式设置

制作HTML表格主要使用table、tr、td和th标签。通过这些标签可以构建出结构清晰的数据表格，并结合简单的CSS设置基础样式，使其更易读美观。

基本HTML表格结构

一个最简单的HTML表格由table标签包裹，内部用tr定义行，td定义普通单元格，th定义表头单元格。

<table>
  <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>

说明： table 是整个表格的容器； tr 表示表格中的一行； th 用于表头，内容默认加粗居中； td 是普通数据单元格。

添加边框与间距

默认情况下，表格没有边框，看起来不明显。可以通过内联样式或CSS添加边框和调整间距。

给表格加边框：border 属性可设置边框样式
让边框合并成一条线：border-collapse: collapse
设置单元格内间距：padding
控制行高或外边距：line-height 或 margin

<table style="border: 1px solid #000; border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid #000; padding: 8px;">姓名</th>
    <th style="border: 1px solid #000; padding: 8px;">年龄</th>
    <th style="border: 1px solid #000; padding: 8px;">城市</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 8px;">张三</td>
    <td style="border: 1px solid #000; padding: 8px;">25</td>
    <td style="border: 1px solid #000; padding: 8px;">北京</td>
  </tr>
</table>

效果：表格线条清晰，文字与边框之间有留白，提升可读性。

设置背景色与对齐方式

为表头或不同行设置背景色，有助于区分内容区域。同时可调整文本对齐方式，使表格更整齐。

盘古大模型

华为云推出的一系列高性能人工智能大模型

207 查看详情盘古大模型

表头背景色：background-color: #f0f0f0;
文本居中：text-align: center;
垂直居中：vertical-align: middle;

<tr>
  <th style="border:1px solid #000; padding:8px; background-color:#4CAF50; color:white; text-align:center;">姓名</th>
  <th style=";border:1px solid #000; padding:8px; background-color:#4CAF50; color:white; text-align:center;">年龄</th>
  <th style="border:1px solid #000; padding:8px; background-color:#4CAF50; color:white; text-align:center;">城市</th>
</tr>

建议将常用样式提取到<style></style>标签中，便于维护。

简化代码：使用CSS类

避免重复写内联样式，推荐使用CSS类来统一管理表格样式。

<style>
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
.th, .td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.th {
  background-color: #4CAF50;
  color: white;
  text-align: center;
}
</style>

<table class="table">
  <tr>
    <th class="th">姓名</th>
    <th class="th">年龄</th>
    <th class="th">城市</th>
  </tr>
  <tr>
    <td class="td">张三</td>
    <td class="td">25</td>
    <td class="td">北京</td>
  </tr>
</table>

这样结构更清晰，修改样式时只需调整CSS部分，无需改动HTML标签。

基本上就这些。掌握table、tr、td和基础样式设置，就能创建出实用又美观的HTML表格。不复杂但容易忽略细节，比如边框合并和内边距设置，注意这些会让表格更专业。

以上就是HTML表格的基本制作_HTML table/tr/td表格创建与基础样式设置的详细内容，更多请关注其它相关文章！