HTML 表格标题和说明

上一页
下一页

表格标题和说明

标题和说明用于表格内部，以结构化的格式组织和呈现数据。

表格标题是表格的重要组成部分，它为列提供标签。 <th> (表格标题) 元素用于定义表格标题。

说明用于表格中，为表格提供标题或解释。 <caption> 元素放置在打开的表格标签之后。

HTML Table Headers and Captions

<caption> 标签在 HTML5 和 XHTML 中已弃用。这意味着它仍然被大多数网络浏览器支持，但不建议在新网页中使用。如果您正在编写新代码，则应改用 figure 和 figcaption 元素。figure 元素用于组合相关内容，figcaption 元素用于为内容提供说明。

<caption> 标签在 HTML5 和 XHTML 中已弃用。这意味着它仍然被大多数网络浏览器支持，但不建议在新网页中使用。如果您正在编写新代码，则应改用 figure 和 figcaption 元素。figure 元素用于组合相关内容，figcaption 元素用于为内容提供说明。

创建表格标题和说明的语法

以下是为 HTML 表格创建标题和说明的语法

<table>
<caption>Description of table</caption>
<tr>
   <th>heading 1</th>
   <th>heading 2</th>
   <th>heading 3</th>
</tr>
</table>

为表格定义标题行

<th> 标签用于表示表格标题，通常用于 <tr> (表格行) 元素内。与用于普通单元格的 <td> (表格数据) 标签不同，<th> 保留用于标题。在大多数情况下，表格的第一行被指定为标题行。

示例

考虑一个简单的 HTML 表格，其中包含“姓名”和“薪水”的标题

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

表格标题样式

表格标题样式可以增强表格的视觉吸引力。CSS 可以应用于 <th> 元素以自定义其外观。在下面的示例中，一个简单的 CSS 样式添加到 <style> 标签（位于 <head> 部分）中，以修改表格标题的背景颜色和文本对齐方式。

示例

此示例演示如何使用 CSS 设置表格标题样式

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
   th {
      background-color: #4CAF50;
      color: white;
      text-align: left;
      padding: 8px;
   }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

在任何行中使用标题单元格

虽然通常在表格的第一行使用 <th>，但您可以根据需要在任何行中使用它。这种灵活性允许创建具有多个标题行或在表格中穿插标题的复杂表格。

示例

在此示例中，我们正在创建第一行中的表格标题

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
      th {
         background-color: #4CAF50;
         color: white;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <th>Additional Details</th>
      <th>Specialization</th>
   </tr>
   <tr>
      <td>Technical Lead</td>
      <td>Web Development</td>
   </tr>
   </table>
</body>

</html>

使用 <thead> 元素的表格标题

<thead> 标签用于对表格标题单元格进行分组，以便可以将组合的 CSS 样式应用于标题单元格。

<thead> 标签通常放置在 <table> 元素内，并包含一个或多个 <tr> 元素，每个元素又包含表示列标题的 <th> 元素。

示例

在此示例中，我们正在使用 thead 标签创建表格标题

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border=1>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <!-- Table body goes here -->
   </table>
</body>

</html>

定义多个标题行

您可以在 <thead> 中包含多个 <tr> 元素以创建多个标题行。当您的表格结构需要更复杂的标题层次结构时，这很有用。

示例

在此示例中，我们将两行定义为表格标题

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
<table border=1>
   <thead>
      <tr>
         <th colspan=2>Tutorialspoint</th>
      </tr>
      <tr>
         <th>Role</th>
         <th>Experience</th>
      </tr>
   </thead>
   <tr>
      <td>Technical Lead</td>
      <td>5 Years</td>
   </tr>
   <tr>
      <td>Web Developer</td>
      <td>2 Years</td>
   </tr>
</table>
</body>

</html>

在 <thead> 内使用 '<colgroup>'

<colgroup> 标签可用于 <thead> 中，以将一组列组合在一起，并将 CSS 样式或属性应用于整列。

示例

在此示例中，我们通过在 colgroup 标签中对这两列进行分组，将样式应用于表格的前两列。

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .col1 {
         background-color: #f2f2f2;
      }
   </style>
</head>

<body>
   <h1>Table with colgroup</h1>
   <table border="1">
      <colgroup class="col1">
         <col  style="width: 150px;">
         <col  style="width: 200px;">
      </colgroup>
         <col  style="width: 150px;">
         <col  style="width: 100px;">
      <thead>
         <tr>
               <th>Product ID</th>
               <th>Product Name</th>
               <th>Category</th>
               <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
               <td>1</td>
               <td>Smartphone</td>
               <td>Electronics</td>
               <td>$299.00</td>
         </tr>
         <tr>
               <td>2</td>
               <td>Office Chair</td>
               <td>Furniture</td>
               <td>$89.00</td>
         </tr>
         <tr>
               <td>3</td>
               <td>Laptop</td>
               <td>Electronics</td>
               <td>$999.00</td>
         </tr>
      </tbody>
   </table>
</body>

</html>

与 '<tfoot>' 和 '<tbody>' 组合

<thead> 标签通常与 <tfoot> (表格脚注) 和 <tbody> (表格主体) 组合使用，以创建全面的表格结构。

示例

在以下代码中，表格结构将表头、主体和脚注内容分开，以实现更好的组织。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>

      <tbody>
         <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
         </tr>
      </tbody>

      <tfoot>
         <tr>
            <td>Total</td>
            <td></td>
            <td></td>
         </tr>
      </tfoot>
   </table>
   <p>
      Footers are generally used to enter 
      sum of values of each column.
   </p>
</body>

</html>

<thead> 和 <th> 的区别

以下是突出显示 <thead> 和 <th> 之间区别的几点：

  • <thead> 标签是用于分组标题内容的结构元素，而 <th> 是定义标题单元格的单元格级元素。
  • 通常在 <thead> 中使用 <th>，但 <th> 也可以在 <thead> 外使用，以在普通行中定义标题。
  • 包含 <thead> 是可选的；但是，使用它可以改善表格的语义结构。

向 HTML 表格添加说明

caption 标签 将用作表格的标题或解释，它显示在表格顶部。

示例

在以下代码中，我们将在 HTML 表格顶部显示一个说明

<!DOCTYPE html>

<html>
<head>
   <title>HTML Table Caption</title>
</head>

<body>
   <table border="1">
      <caption>This is the caption</caption>
      <tr>
         <td>row 1, column 1</td>
         <td>row 1, column 2</td>
      </tr>
      <tr>
         <td>row 2, column 1</td>
         <td>row 2, column 2</td>
      </tr>
   </table>
</body>

</html>

表格标题、主体和脚注

表格可以分为三个部分：标题、主体和脚注。标题和脚注类似于文字处理文档中的页眉和页脚，每个页面都保持不变，而主体是表格的主要内容持有者。

用于分隔表格标题、主体和脚注的三个元素是：

  • <thead> 标签用于创建单独的表格标题。
  • <tbody> 标签用于指示表格的主体。
  • <tfoot> 标签用于创建单独的表格脚注。

表格可能包含多个 <tbody> 元素以指示不同的页面或数据组。但值得注意的是，<thead> 和 <tfoot> 标签应该出现在 <tbody> 之前

示例

在此示例中，我们正在创建一个包含表格标题、主体和脚注的 HTML 表格

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border="1" width="100%">
      <thead>
         <tr>
            <th colspan="4">
               This is the head of the table
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">
               This is the foot of the table
            </td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
         </tr>
      </tbody>
   </table>
</body>

</html>
打印页面
上一页
下一页
广告