HTML <th> टैग

  • पिछला पृष्ठ <tfoot>
  • अगला पृष्ठ <thead>

परिभाषा और उपयोग

<th> टैबल शीर्षक टैग HTML तालिका में शीर्षक कोष्ठ को परिभाषित करता है。

HTML तालिका में दो प्रकार के कोष्ठ हैं:

  • शीर्षक कोष्ठ - शीर्षक जानकारी वाला (उपयोग करते हुए) <th> एलिमेंट का निर्माण)
  • डाटा कोष्ठ - डाटा वाला (उपयोग करते हुए) <td> एलिमेंट का निर्माण)

डिफ़ॉल्ट में,<th> एलिमेंट में टेक्स्ट बोल्ड और केंद्रित है।

डिफ़ॉल्ट में, <td> एलिमेंट में की टेक्स्ट साधारण है और बाईं ओर जमाना है।

इसके अलावा देखें:

HTML शिक्षण:HTML तालिका

HTML DOM संदर्भ दस्तावेज़:TableHeader ऑब्जैक्ट

CSS शिक्षण:फॉर्म के शैली को सेट करना

उदाहरण

उदाहरण 1

तीन पंक्तियों, दो शीर्षक कोष्ठ और चार डाटा कोष्ठ वाली साधारण HTML तालिका:

<table>
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>फ़रवरी</td>
    <td>￥4500</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 2

कैसे जमाना: <th> के लिए सामग्री (CSS के उपयोग से):

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

खुद से प्रयोग करें

उदाहरण 3

CSS के उपयोग से तालिका शीर्षक कोष्ठ के पृष्ठभूमि रंग कैसे जोड़ें:

<table>
  <tr>
    <th style="background-color:#FF0000">महीना</th>
    <th style="background-color:#00FF00">बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
 </table>

खुद से प्रयोग करें

उदाहरण 4

CSS के उपयोग से तालिका शीर्षक कोष्ठ की ऊंचाई कैसे सेट करें:

<table>
  <tr>
    <th style="height:100px">महीना</th>
    <th style="height:100px">बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 5

कैसे तालिका शीर्षक कोष्ठकों में नहीं बदलने के लिए विनियमित करें (CSS के उपयोग से):

<table>
  <tr>
    <th>महीना</th>
    <th style="white-space:nowrap">नए कार के लिए जमा की गई रकम</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 6

कैसे ऊर्ध्व-समानता सेट करें <th> के लिए सामग्री (CSS के उपयोग से):

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

खुद से प्रयोग करें

उदाहरण 7

कैसे तालिका शीर्षक कोष्ठकों की चौड़ाई सेट करें (CSS के उपयोग से):

<table style="width:100%">
  <tr>
    <th style="width:70%">महीना</th>
    <th style="width:30%">बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 8

कैसे तालिका शीर्षक बनाएं:

<table>
  <tr>
    <th>नाम</th>
    <th>ईमेल</th>
    <th>टेलीफ़ोन</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 9

कैसे शीर्षक वाली तालिका बनाएं:

<table>
  <caption>मासिक बचत</caption>
  <tr>
    <th>महीना</th>
    <th>बचत</th>
  </tr>
  <tr>
    <td>जनवरी</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>फ़रवरी</td>
    <td>￥4500</td>
  </tr>
</table>

खुद से प्रयोग करें

उदाहरण 10

कैसे बहु-पड़ाव या बहु-स्तम्भ कोष्ठकों के लिए तालिका कोष्ठकों को परिभाषित करें:

<table>
  <tr>
    <th>नाम</th>
    <th>ईमेल</th>
    <th colspan="2">टेलीफ़ोन</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

खुद से प्रयोग करें

गुण

गुण मूल्य वर्णन
abbr पाठ विनियमित करता है कि शीर्षक कोष्ठकों में सामग्री की संक्षिप्त संस्करण।
colspan संख्या विनियमित करता है कि कौन-सी शीर्षक कोष्ठकों को छांटा जाना चाहिए।
headers header_id विनियमित करता है कि एक या अधिक शीर्षक कोष्ठकों से संबंधित होना चाहिए।
rowspan संख्या विनियमित करता है कि कौन-सी शीर्षक को जो कोष्ठकों को छांटा जाना चाहिए।
scope
  • col
  • colgroup
  • row
  • rowgroup
 表头单元格是列头、行头还是一组列或行的头部。

शीर्षक कोष्ठक एक स्तम्भ का सिर, एक पट्टी का सिर है या एक समूह स्तम्भ या पट्टी का सिर है।

<th> टैग इवेंट अटिवर्ब का समर्थन करती है ग्लोबल अटिवर्ब।

HTML में ग्लोबल अटिवर्ब

<th> टैग इवेंट अटिवर्ब का समर्थन करती है HTML में इवेंट अटिवर्ब।

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

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

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

ब्राउज़र समर्थन

च्रोम एज फायरफॉक्स सैफारी ऑपेरा
च्रोम एज फायरफॉक्स सैफारी ऑपेरा
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट
  • पिछला पृष्ठ <tfoot>
  • अगला पृष्ठ <thead>