HTML <tbody> टैग

  • पिछला पृष्ठ <table>
  • अगला पृष्ठ <td>

वर्णन और उपयोग

<tbody> टैग का उपयोग HTML तालिका के मुख्यांश सामग्री को ग्रुप करने के लिए किया जाता है。

<tbody> एलीमेंट के साथ <thead> और <tfoot> एलीमेंट को संयुक्त रूप से उपयोग करके तालिका के प्रत्येक भाग (मुख्यांश, हेडर, फुटर) निर्दिष्ट करने के लिए इस्तेमाल किया जाता है。

ब्राउज़र इन एलीमेंटों का उपयोग कर सकते हैं ताकि तालिका के मुख्यांश को रोल करते समय हेडर और फुटर स्वतंत्र रूप से दिखाया जा सके। इसके अलावा बड़ी तालिका को कई पृष्ठों पर प्रिंट करते समय इन एलीमेंटों के द्वारा तालिका के हेडर और फुटर प्रत्येक पृष्ठ के ऊपर और नीचे प्रिंट किए जा सकते हैं।

ध्यान दें:<tbody> एलीमेंट के भीतर एक या अधिक <tr> टैग.

<tbody> टैग को निम्नलिखित संदर्भ में उपयोग करना होगा: के रूप में <table> एलीमेंट के उप-एलीमेंट, किसी भी <caption>、<colgroup> और <thead> एलीमेंट के बाद।

सूचना:मूलभूत रूप से，<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

कैसे समानता दें <tbody> के भीतर की सामग्री (CSS का उपयोग):

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

स्वयं प्रयोग करें

उदाहरण 4

कैसे ऊर्ध्व समानता दें <tbody> के भीतर की सामग्री (CSS का उपयोग):

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

स्वयं प्रयोग करें

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

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

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

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

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

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

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

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

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