HTML 表格

在网页设计中，表格是一个非常重要的元素，用于展示数据，如成绩表、价格列表等。通过合理使用HTML表格，可以使得数据更加清晰易读。本教程将带你了解HTML表格的基本概念及其相关标签的使用方法。

HTML 表格定义

HTML中的表格是通过<table>标签来创建的。一个基本的表格结构包括行（<tr>）、单元格（<td>）以及可选的表头（<th>）。表格能够帮助我们组织和展示信息，使页面内容更有条理。

示例

xxxxxxxxxx

<style>

    table.sl2table-t1 {

      border-collapse: collapse;

      width: 100%;

      margin-bottom: 20px;

    }

    table.sl2table-t1 th, table.sl2table-t1 td {

      border: 1px solid black;

      padding: 8px;

      text-align: center;

    }

    table.sl2table-t1 th {

      background-color: #00ccff;

    }

    table.sl2table-t1 caption {

      font-size: 1.2em;

      margin-bottom: 10px;

    }

    table.sl2table-t1 .highlight {

      background-color: yellow;

    }

  </style>

  <table class="sl2table-t1">

    <caption>员工信息表</caption>

    <colgroup>

      <col span="2" style="background-color: #f2f2f2;">

      <col style="width: 30%;">

    </colgroup>

    <thead>

      <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>职业</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>张三</td>

        <td>28</td>

        <td>程序员</td>

      </tr>

      <tr>

        <td>李四</td>

        <td>30</td>

        <td>设计师</td>

      </tr>

      <tr>

        <td>王五</td>

        <td>32</td>

        <td>产品经理</td>

      </tr>

    </tbody>

    <tfoot>

      <tr>

        <td colspan="3">总计：3名员工</td>

      </tr>

    </tfoot>

  </table>

HTML 表格标签

• <table> 定义一个表格。属性：border、width、height、align、bgcolor、cellspacing、cellpadding。
• <tr> 定义表格中的一行。属性：align、valign、bgcolor。
• <td> 定义表格中的一个普通单元格。属性：colspan、rowspan、align、valign、bgcolor。
• <th> 定义表格中的一个表头单元格，通常会加粗显示并且居中。属性：colspan、rowspan、align、valign、bgcolor。
• <thead> 定义表格的头部，通常包含一行或多行表头单元格。属性：align、valign。
• <tbody> 定义表格的主体部分，包含表格的主要数据。属性：align、valign。
• <tfoot> 定义表格的脚注部分，通常用于总结或附加信息。属性：align、valign。
• <caption> 定义表格的标题，通常显示在表格的上方。属性：align。
• <colgroup> 定义一组列。属性：span、width、align、valign。
• <col> 定义列的属性。属性：span、width、align、valign。

常用属性解释

• align：设置内容的水平对齐方式（左、中、右），建议使用css替代。
• valign：设置内容的垂直对齐方式（顶、中、底），建议使用css替代。
• bgcolor：设置背景颜色（已废弃，推荐使用CSS），建议使用css替代。
• border：设置表格的边框宽度，建议使用css替代。
• width：设置元素的宽度，建议使用css替代。
• height：设置元素的高度，建议使用css替代。
• colspan：设置单元格跨越的列数。
• rowspan：设置单元格跨越的行数。
• span：设置列的数量。
• cellspacing：设置单元格之间的间距（已废弃，推荐使用CSS）。
• cellpadding：设置单元格内部的填充（已废弃，推荐使用CSS）。

HTML 表格结构

通过合理使用 <thead>、<tbody> 和 <tfoot> 标签，可以使表格结构更加清晰，代码更具可读性和可维护性。

<thead> 标签

• 定义表格的头部：<thead> 标签用于定义表格的头部部分，通常包含表头单元格（<th>）。
• 结构：<thead> 标签通常包含一个或多个 <tr> 标签，每个 <tr> 标签又包含一个或多个 <th> 标签。

<tbody> 标签

• 定义表格的主体：<tbody> 标签用于定义表格的主体部分，通常包含表格的主要数据。
• 结构：<tbody> 标签通常包含一个或多个 <tr> 标签，每个 <tr> 标签又包含一个或多个 <td> 或 <th> 标签。

<tfoot> 标签

• 定义表格的脚注：<tfoot> 标签用于定义表格的脚注部分，通常包含总结或附加信息。
• 结构：<tfoot> 标签通常包含一个或多个 <tr> 标签，每个 <tr> 标签又包含一个或多个 <td> 或 <th> 标签。

HTML 表格表头

使用<th>标签来定义表格的表头。例如：

xxxxxxxxxx

<?php 

<table>

  <tr>

    <th>姓名</th>

    <th>年龄</th>

    <th>职业</th>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

  <!-- 其他行 -->

</table>

?>

HTML 表格行

每一行都是由<tr>标签开始，并包含一个或多个<td>或<th>标签。例如：

xxxxxxxxxx

<tr>

  <td>张三</td>

  <td>28</td>

  <td>程序员</td>

</tr>

HTML 表格单元格

单元格是表格中最基本的组成部分，可以通过<td>标签来定义。如果需要定义表头单元格，则使用<th>标签。

HTML 表格合并单元格

• 合并列：使用colspan属性，是向右合并列。
• 合并行：使用rowspan属性，是向下合并行。
  例如，合并两列：

xxxxxxxxxx

<td colspan="2">向右，合并两列的单元格</td>

HTML 表格边框

默认情况下，HTML表格是没有边框的。可以通过CSS或直接在<table>标签上使用border属性来设置边框。例如：

xxxxxxxxxx

table, th, td {

    border: 1px solid black;

  }

如果仅仅在table标签上添加样式，则单元格没有边框。

控制边框的合并与分离

在HTML表格中，边框的合并与分离可以通过CSS的border-collapse属性来控制。这个属性决定了表格单元格之间的边框是否合并或分离。

border-collapse 属性

用途：控制表格边框的合并或分离。

值：

collapse：合并边框，相邻单元格的边框合并为一条。

• 合并边框，相邻单元格的边框合并为一条线。
• 适用于大多数情况，使表格看起来更加整洁。

separate：分离边框，每个单元格的边框独立显示。

• 分离边框，每个单元格的边框独立显示。
• 可以使用border-spacing属性来控制单元格之间的间距。

示例

合并边框 (collapse)

当设置border-collapse: collapse;时，相邻单元格的边框会合并成一条线。这是最常见的设置方式，可以使表格看起来更加整洁。

分离边框 (separate)

当设置border-collapse: separate;时，每个单元格的边框都会独立显示。可以使用border-spacing属性来控制单元格之间的间距。

HTML 表格大小

可以通过CSS来调整表格的宽度和高度。例如：

xxxxxxxxxx

<style>

  table { width: 50%; }

  td, th { height: 50px; }

</style>

HTML 表格对齐方式

可以通过text-align和vertical-align属性来控制单元格内文本的水平和垂直对齐方式。例如：

xxxxxxxxxx

<td style="text-align:center; vertical-align:middle;">居中文本</td>

最佳实现方式是以 text-align和vertical-align来控制单元格，而不是table；但是，以text-align来控制table可以实现整个表格的单元格的控制，但是vertical-align则不可以，详情参见css继承。

HTML 表格填充和间距

使用padding来设置单元格内的填充，使用cellspacing（已废弃，推荐使用CSS）来设置单元格之间的间距。例如：

xxxxxxxxxx

<table style="border-collapse:collapse;">

  <tr>

    <td style="padding:10px;">带填充的单元格</td>

  </tr>

</table>

HTML 表格样式

除了上述提到的属性外，还可以通过CSS来为表格添加更多的样式，比如背景色、字体颜色等。例如：

xxxxxxxxxx

<style>

  table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

  }

  th, td {

    padding: 15px;

    text-align: left;

  }

  th {

    background-color: #f2f2f2;

  }

</style>

HTML 表格<colgroup>

<colgroup> 标签在HTML中用于定义表格中的一组列。它可以用来为多列设置公共的样式属性，而不需要为每个单元格单独设置。<colgroup> 标签通常包含一个或多个 <col> 标签，每个 <col> 标签定义一列的属性。

用途

• 定义列组：<colgroup> 标签用于定义表格中的一组列。
• 设置列样式：通过 <colgroup> 和 <col> 标签，可以为多列设置共同的样式属性，如宽度、背景颜色等。

属性

• span：指定列的数量。如果不使用 <col> 标签，可以直接在 <colgroup> 上使用 span 属性。
• width：设置列的宽度。
• align：设置列内容的水平对齐方式（左、中、右）。
• valign：设置列内容的垂直对齐方式（顶、中、底）。
• bgcolor：设置列的背景颜色（已废弃，推荐使用CSS）。

示例

xxxxxxxxxx

<style>

    #sl2t3 {

      border-collapse: collapse;

      width: 100%;

    }

    #sl2t3 th, #sl2t3 td {

      border: 1px solid black;

      padding: 8px;

      text-align: center;

    }

  </style>

  <table id="sl2t3">

    <colgroup>

      <col span="2" style="background-color: #00ccff;">

      <col style="width: 50%;">

    </colgroup>

    <thead>

      <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>职业</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>张三</td>

        <td>28</td>

        <td>程序员</td>

      </tr>

      <tr>

        <td>李四</td>

        <td>30</td>

        <td>设计师</td>

      </tr>

    </tbody>

  </table>

示例解释:

<colgroup> 标签：

• 定义了一组列。
• 包含两个 <col> 标签，分别设置前两列的背景颜色和第三列的宽度。

<col> 标签：

• 第一个 <col> 标签使用 span="2" 属性，表示前两列共享相同的背景颜色。
• 第二个 <col> 标签设置第三列的宽度为50%。

详细说明

<colgroup> 标签

• span 属性：指定列的数量。例如，<colgroup span="3"> 表示接下来的三列都将应用相同的样式。
• 样式属性：可以在 <colgroup> 标签上直接设置样式属性，这些样式将应用于所有列。

<col> 标签

• span 属性：指定列的数量。例如，<col span="2"> 表示接下来的两列都将应用相同的样式。
• 样式属性：可以在 <col> 标签上设置样式属性，这些样式将应用于特定的列。

以上就是关于HTML表格的基础教程，希望对你有所帮助。在实践中不断尝试和探索，你会逐渐掌握更多技巧，创造出美观实用的网页表格。