本文共 1572 字，大约阅读时间需要 5 分钟。

HTML 表格是 web 开发中广泛使用的工具之一，它能够将数据有组织地展示出来。通过合理的使用表格标签，我们可以创建各种样式的数据表格。

我们知道，表格的创建始于 <table> 标签。每个表格都有若干行（由 <tr> 标签定义），而每行又被分割为多个单元格（由 <td> 标签定义）。需要注意的是，td 和 th 的区别在于，th 表示表头单元格，通常会以粗体字体显示。而 td 则用于数据单元格，作为表格的内容容器。

一个典型的表格结构如下：

   
      
     
                 
行 1, 单元格 1
                 
行 1, 单元格 2
       
       
                 
行 2, 单元格 1
                 
行 2, 单元格 2
       
    
   

在浏览器中，这段代码会显示为以下形式：

为了使表格的外观更加直观，可以添加边框属性。默认情况下，表格在浏览器中可能不会显示边框。如果你的项目需要，往往会希望看到表格的边框。为此，我们可以在 table 标签中添加 border="1" 属性。

举个例子：

   
      
     
                 
Row 1, 单元格 1
                 
Row 1, 单元格 2
       
    
   

在浏览器中，这段代码会显示为：

| Row 1, 单元格1 | Row 1, 单元格2 |

接下来，我们来探讨 HTML 表格的表头实现方式。对于专业性较强的数据展示，通常会在表格顶部添加表头。通过使用 <th> 标签可以轻松实现这一点。

表头单元格的定义如下：

   
      
     
          
Name
                 
Telephone
              
              
          
Bill Gates
                 
555 77 854
                 
555 77 855
              
    
   

在浏览器显示如下：

使用 <tbody> 标签，表格的主体内容可以得到更好的组织。这个标签与 <thead>、<tbody> 和 <tfoot> 结合使用会让表格的不同部分（主体、表头、页脚）更加独立。在打印复杂表格时，表头和页脚会自动跟随表格主体一起输出。

关于 <tbody> 标签的使用规范，我们需要注意以下几点：

此外，表格标题的实现可以通过 <caption> 标签来轻松完成。这个标签必须直接放置在 <table> 标签之后，并且每个表格只能有一个标题。

creates an captions区域如下：

   
  ...
      
     该表格的标题
    
         

在浏览器中，标题会被表格顶端居中显示。通过 CSS 负载 (text-align 和 caption-side) 也可以对标题的显示位置进行调整。

最后，完成以上介绍后，实例部分会进一步展示如何使用 colspan 和 rowspan 属性来实现单元格的跨越。这些属性在 HTML 表格中非常实用，尤其是在数据展示中需要合并单元格的情况下。