HTML <thead> टैग

  • पिछला पृष्ठ <th>
  • अगला पृष्ठ <time>

定义和用法

<thead> 标签用于对 HTML 表格中的标题内容进行分组。

<thead> 元素与 <tbody> 和 </tfoot> 元素结合使用，以规定表格的每个部分（页眉、正文、页脚）。

浏览器可以使用这些元素，使得在滚动表格正文时，页眉和页脚可以独立显示。此外，当打印跨多个页面的大型表格时，这些元素可以使得表格的页眉和页脚在每页的顶部和底部打印出来。

注意：<thead> 元素内部必须有一个或多个 <tr> 标签。

<thead> 标签必须在以下上下文中使用：作为 <table> 元素的子元素，在任何 <caption> 和 <colgroup> 元素之后，以及在任何 <tbody>、</tfoot> 和 <tr> 元素之前。

提示：默认情况下，<thead>、<tbody> 和 <tfoot> 元素不会影响表格的布局。但是，您可以使用 CSS 来设置这些元素的样式（请参阅下面的例子）！

实例

例子 1

包含 <thead>、<tbody> 和 <tfoot> 元素的 HTML 表格：

<table>
  <thead>
    <tr>
      <th>महीना</th>
      <th>बचत</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>जनवरी</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>फरवरी</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

स्वयं प्रयोग कीजिए

例子 2

使用 CSS 设置 <thead>、<tbody> 和 <tfoot> 的样式：

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>महीना</th>
      <th>बचत</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>जनवरी</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>फरवरी</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

स्वयं प्रयोग कीजिए

例子 3

如何对齐 <thead> 中的内容（使用 CSS）：

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>महीना</th>
      <th>बचत</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>जनवरी</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>फरवरी</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

स्वयं प्रयोग कीजिए

例子 4

如何垂直对齐 <thead> 中的内容（使用 CSS）：

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>महीना</th>
      <th>बचत</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>जनवरी</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>फरवरी</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

स्वयं प्रयोग कीजिए

वैश्विक प्रकृति

<thead> टैग इवेंट प्रकृति का समर्थन करते है HTML में वैश्विक प्रकृति。

इवेंट प्रकृति

<thead> टैग इवेंट प्रकृति का समर्थन करते है HTML में इवेंट प्रकृति。

डिफॉल्ट की CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफॉल्ट मान का प्रदर्शन करेंगे <thead> एलीमेंट:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

ब्राउज़र सहायता

च्रोम एज फायरफॉक्स सफारी ओपेरा
च्रोम एज फायरफॉक्स सफारी ओपेरा
सहायता सहायता सहायता सहायता सहायता
  • पिछला पृष्ठ <th>
  • अगला पृष्ठ <time>