HTML 表格详解（简单易懂较详细）

HTML 表格用于在网页上展示数据，通过 <table> 标签及其相关标签来创建。表格由行和列组成，每一行包含一个或多个单元格，单元格可以包含文本、图像、链接等元素。本文将详细介绍 HTML 表格的创建方法、常用标签和属性，以及如何通过 CSS 美化表格。

一、HTML 表格的基本结构

一个简单的 HTML 表格由以下标签组成：

<table>
  <tr>
    <th>表头 1</th>
    <th>表头 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td>数据 4</td>
  </tr>
</table>

• <table>：定义表格的开始和结束。
• <tr>：定义表格中的一行。
• <th>：定义表格的表头单元格，通常用于第一行，表示列的标题。
• <td>：定义表格中的数据单元格，用于存放具体的数据。

二、HTML 表格的常用属性

1. border

border 属性用于设置表格的边框。默认情况下，表格没有边框。

<table border="1">
  <!-- 表格内容 -->
</table>

2. cellpadding

cellpadding 属性用于设置单元格内容与单元格边框之间的距离。

<table border="1" cellpadding="5">
  <!-- 表格内容 -->
</table>

3. cellspacing

cellspacing 属性用于设置单元格之间的间距。

<table border="1" cellpadding="5" cellspacing="0">
  <!-- 表格内容 -->
</table>

4. width 和 height

width 和 height 属性用于设置表格的宽度和高度。这些属性可以以像素或百分比为单位设置。

<table border="1" width="500" height="200">
  <!-- 表格内容 -->
</table>

三、HTML 表格的高级用法

1. 合并单元格

(1) colspan

colspan 属性用于合并水平方向上的单元格。

<table border="1">
  <tr>
    <th colspan="2">表头 1 和 2 合并</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

(2) rowspan

rowspan 属性用于合并垂直方向上的单元格。

<table border="1">
  <tr>
    <th rowspan="2">表头 1</th>
    <td>数据 1</td>
  </tr>
  <tr>
    <td>数据 2</td>
  </tr>
</table>

2. 表格的头部、主体和脚部

(1) <thead>

<thead> 标签用于定义表格的头部，通常包含表头单元格。

<table border="1">
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
    </tr>
  </thead>
  <!-- 表格主体 -->
</table>

(2) <tbody>

<tbody> 标签用于定义表格的主体，包含数据单元格。

<table border="1">
  <thead>
    <tr