使用HTML表格可以将文本、图像、链接、其他表等数据排列成单元格的行和列。

HTML表格是使用<table>标记创建的，其中<tr>标记用于创建表行，<td>标记用于创建数据单元格。
默认情况下，<td>下的元素是左对齐。

HTML 表格示例

<table border = "1">
   <tr>
      <td>第1行, 第1列</td>
      <td>第1行, 第2列</td>
   </tr>
   
   <tr>
      <td>第2行, 第2列</td>
      <td>第2行, 第2列</td>
   </tr>
</table>

效果：

在这里，border是<table>标记的一个属性，用于在所有单元格之间放置边框。如果不需要边框，则可以使用border="0"。

表格标题

可以使用<th>标记定义表标题。
通常，我们将把最上面的一行作为表标题，否则我们可以在任何行中使用<th>元素。
在<th>标记中定义的标题默认为居中粗体。

<table border = "1">
   <tr>
      <th>名称</th>
      <th>年龄</th>
   </tr>
   <tr>
      <td>Tom</td>
      <td>20</td>
   </tr>
   
   <tr>
      <td>Hyman</td>
      <td>28</td>
   </tr>

   <tr>
      <td>Bob</td>
      <td>23</td>
   </tr>
</table>

效果如下：

Cellpadding和cellspacking属性

有两个名为cellpadding和cellspacking的属性，我们将使用它们来调整表单元格中的空白。cellspacing属性定义表单元格之间的空间，
而cellpadding表示单元格边框和单元格内内容之间的距离。

<table border = "1" cellpadding = "5" cellspacing = "5">
   <tr>
      <th>名称</th>
      <th>年龄</th>
   </tr>
   <tr>
      <td>Tom</td>
      <td>20</td>
   </tr>
   
   <tr>
      <td>Hyman</td>
      <td>28</td>
   </tr>

   <tr>
      <td>Bob</td>
      <td>23</td>
   </tr>
</table>

Colspan和Rowspan属性

如果要将两个或多个列合并为一个列，则将使用colspan属性。
如果要合并两行或多行，则使用rowspan。

<table border = "1">
   <tr>
      <th>第1列</th>
      <th>第2列</th>
      <th>第3列</th>
   </tr>
   <tr>
      <td rowspan = "2">第1行第1列</td>
      <td>第1行第2列</td>
      <td>第1行第3列</td>
   </tr>
   <tr>
      <td>第2行第2列</td>
      <td>第2行第3列</td>
   </tr>
   <tr>
      <td colspan = "3">第3行第1列</td>
   </tr>
</table>

效果如下：

表格背景

我们可以使用以下两种方法之一设置表格背景：

bgcolor属性-我们可以为整个表或仅为一个单元格设置背景色。

background属性-我们可以为整个表格或仅为一个单元格设置背景图像。

也可以使用bordercolor属性设置边界颜色。

注意 HTML5中不推荐使用bgcolor、background和bordercolor属性。

<table border = "1" bordercolor = "green" bgcolor = "yellow">
   <tr>
      <th>第1列</th>
      <th>第2列</th>
      <th>第3列</th>
   </tr>
   <tr>
      <td rowspan = "2">第1行第1列</td>
      <td>第1行第2列</td>
      <td>第1行第3列</td>
   </tr>
   <tr>
      <td>第2行第2列</td>
      <td>第2行第3列</td>
   </tr>
   <tr>
      <td colspan = "3">第3行第1列</td>
   </tr>
</table>

效果如下：

下面是一个使用background属性的示例。这里我们将使用/static/img目录中提供的一张图片。

<table border = "1" bordercolor = "green" background = "/static/img/logo.png">
   <tr>
      <th>第1列</th>
      <th>第2列</th>
      <th>第3列</th>
   </tr>
   <tr>
      <td rowspan = "2">第1行第1列</td>
      <td>第1行第2列</td>
      <td>第1行第3列</td>
   </tr>
   <tr>
      <td>第2行第2列</td>
      <td>第2行第3列</td>
   </tr>
   <tr>
      <td colspan = "3">第3行第1列</td>
   </tr>
</table>

这将产生以下结果。这里背景图像不适用于表的标题。

表格的高度和宽度

可以使用width和height属性设置表格宽度和高度。
我们可以用像素或者可用屏幕面积的百分比来指定表格宽度或高度。

<table border = "1" width = "400" height = "150">
   <tr>
      <td>第1行第1列</td>
      <td>第1行第2列</td>
   </tr>
   
   <tr>
      <td>第2行第1列</td>
      <td>第2行第2列</td>
   </tr>
</table>

效果如下：

表格的说明文字

caption标记用作表的标题或说明，并显示在表的顶部。在较新版本的HTML/XHTML中，不推荐使用此标记。

<table border = "1" width = "100%">
         <caption>这是表格的说明</caption>
         
   <tr>
      <td>第1行第1列</td>
      <td>第1行第2列</td>
   </tr>
   
   <tr>
      <td>第2行第1列</td>
      <td>第2行第2列</td>
   </tr>
</table>

效果如下：

表头、表体、表尾

表格可分为三部分-页眉、正文和页脚。
页眉和页脚与字处理文档中的页眉和页脚非常相似，而正文是表的主要内容。

分割表头、表体和表尾的三个元素是：

<thead>创建单独的表格标题。

<tbody>−表示表格的主体。

<tfoot>–创建单独的表尾。

一个表可以包含几个<tbody>元素，以指示不同的页或数据组。但是需要注意的是<thead>和<tfoot>标记应该出现在之前。

<table border = "1" width = "100%">
   <thead>
      <tr>
         <td colspan = "4">这是表头</td>
      </tr>
   </thead>
   
   <tfoot>
      <tr>
         <td colspan = "4">这是表尾</td>
      </tr>
   </tfoot>
   
   <tbody>
      <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td>单元格3</td>
         <td>单元格4</td>
      </tr>
   </tbody>
   
</table>

嵌套表

我们可以在另一个表中使用一个表。不仅是表，我们还可以在表格的<td>中使用几乎所有的html标记。

<table border = "1" width = "100%">
   <tr>
      <td>
         <table border = "1" width = "100%">
            <tr>
               <th>标题1</th>
               <th>标题2</th>
            </tr>
            <tr>
               <td>表2的单元格1</td>
               <td>表2的单元格1</td>
            </tr>
            <tr>
               <td>表2的单元格3</td>
               <td>表2的单元格4</td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td>表1的单元格</td>
   </tr>
</table>