l-1

WEB教程

主页/HTML教程/HTML语法规范/HTML 表格

HTML教程

HTML 表格

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

HTML 表格定义

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

示例

HTML表格示例：

代码：

copy

<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>

输出结果：

员工信息表
姓名 年龄 职业
张三 28 程序员
李四 30 设计师
王五 32 产品经理
总计：3名员工

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）。

cellspacing 和 cellpadding 属性在HTML5中被废弃了。这些属性在早期的HTML版本中用于控制表格单元格之间的间距和单元格内部的填充，但在HTML5中，这些属性被移除，推荐使用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>标签来定义表格的表头。例如：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <!-- 其他行 -->
</table>

HTML 表格行

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

<tr>
  <td>张三</td>
  <td>28</td>
  <td>程序员</td>
</tr>

HTML 表格单元格

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

HTML 表格合并单元格

  • 合并列：使用colspan属性，是向右合并列。
  • 合并行：使用rowspan属性，是向下合并行。
    例如，合并两列：
<td colspan="2">向右，合并两列的单元格</td>

HTML 表格边框

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

table, th, td {
    border: 1px solid black;
  }

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

控制边框的合并与分离

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

border-collapse 属性

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

值：

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

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

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

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

示例

合并边框 (collapse)

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

姓名 年龄 职业
张三 28 程序员
李四 30 设计师

分离边框 (separate)

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

姓名 年龄 职业
张三 28 程序员
李四 30 设计师

HTML 表格大小

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

<style>
  table { width: 50%; }
  td, th { height: 50px; }
</style>

HTML 表格对齐方式

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

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

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

HTML 表格填充和间距

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

<table style="border-collapse:collapse;">
  <tr>
    <td style="padding:10px;">带填充的单元格</td>
  </tr>
</table>

HTML 表格样式

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

<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）。

示例

示例：

代码：

copy

<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>

输出结果：

姓名 年龄 职业
张三 28 程序员
李四 30 设计师

示例解释:

<colgroup> 标签：

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

<col> 标签：

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

详细说明

<colgroup> 标签

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

<col> 标签

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

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