当前位置：首页 > 前端开发 > 正文

html中如何添加table

admin
前端开发
2025-07-11
3758

HTML中添加表格，需使用` 标签定义表格，内部包含一个或多个 （表格行），每行由 （数据单元格）或`（表头单元格）组成

HTML中,表格是一种用于组织和展示数据的常用元素，通过使用<table>标签及其相关元素，可以轻松地创建结构化的表格，以下是如何在HTML中添加表格的详细步骤和示例：

基本结构

一个基本的HTML表格由<table>标签开始和结束，每个表格由一个或多个<tr>（表格行）组成，而每个行又包含多个<td>（表格数据）或<th>（表头）元素。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <!-更多行 -->
</table>

常用属性

border：定义表格边框的宽度。border="1"，但现代HTML中推荐使用CSS来设置样式。
cellpadding和cellspacing：分别定义单元格内部内容和单元格边框之间的空间，以及单元格之间的空间，这些属性现在也常使用CSS来替代。
width和height：定义表格的宽度和高度（不推荐使用，因为更好的做法是使用CSS进行布局）。
align和valign：定义表格、单元格内容的对齐方式（不推荐使用，因为这些属性已被废弃）。

表头和表身

表头可以使用<thead>标签来定义，而表身可以使用<tbody>标签来定义。

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
</table>

合并单元格

可以使用rowspan和colspan属性来设置表格中的行列数。

<table>
  <tr>
    <td rowspan="2">数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
  </tr>
  <tr>
    <td colspan="2">数据4</td>
  </tr>
</table>

rowspan属性用来设置单元格跨越的行数，colspan属性用来设置单元格跨越的列数。

CSS样式控制

现代web开发中,通常使用CSS来控制表格的布局和样式，而不是使用HTML的属性，可以使用CSS来设置表格的宽度、边框、间距、内边距、外边距、背景色等。

table {
  border: 1px solid black;
  width: 100%;
  margin-bottom: 20px;
  background-color: white;
  border-collapse: collapse; / 合并边框 /
}
th, td {
  padding: 8px; / 单元格边距为8px /
  border: 1px solid black; / 单元格边框样式 /
  text-align: center; / 水平居中对齐 /
  vertical-align: middle; / 垂直居中对齐 /
}

示例代码

以下是一个完整的HTML表格示例,结合了上述所有内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">HTML表格示例</title>
  <style>
    table {
      border: 1px solid black;
      width: 100%;
      margin-bottom: 20px;
      background-color: white;
      border-collapse: collapse; / 合并边框 /
    }
    th, td {
      padding: 8px; / 单元格边距为8px /
      border: 1px solid black; / 单元格边框样式 /
      text-align: center; / 水平居中对齐 /
      vertical-align: middle; / 垂直居中对齐 /
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">数据1</td>
        <td>数据2</td>
      </tr>
      <tr>
        <td>数据3</td>
      </tr>
      <tr>
        <td colspan="2">数据4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>