HTML में टेबल हेडिंग (th) कैसे बनाएं?

HTML टेबल में हेडर सेल (header cell) बनाने के लिए <th> टैग का उपयोग किया जाता है। यह टेक्स्ट को डिफ़ॉल्ट रूप से बोल्ड और केंद्र-संरेखित करता है। यह <tr> (टेबल रो) के अंदर उपयोग किया जाता है, आमतौर पर <thead> में।

विशेषताएँ

विशेषता	मान	विवरण
abbr	abbreviated_text	निरस्त - हेडर सेल की संक्षिप्त सामग्री।
align	right, left, center, justify, char	निरस्त - सामग्री संरेखण। CSS `text-align` उपयोग करें।
axis	Name	निरस्त - इस th के लिए श्रेणी निर्दिष्ट करता है।
bgcolor	rgb(x,x,x), #hexcode, colorname	निरस्त - पृष्ठभूमि रंग। CSS `background-color` उपयोग करें।
char	Character	निरस्त - संरेखण वर्ण। जब align="char" हो।
charoff	पिक्सेल या %	निरस्त - संरेखण ऑफसेट। जब align="char" हो।
colspan	संख्या	हेडर सेल द्वारा फैलाए गए कॉलम की संख्या।
headers	ID	एक या अधिक हेडर सेल्स निर्दिष्ट करता है जिनसे सेल संबंधित है।
height	पिक्सेल	निरस्त - हेडर सेल की ऊंचाई। CSS `height` उपयोग करें।
nowrap	nowrap	निरस्त - टेक्स्ट रैपिंग रोकता है। CSS `white-space: nowrap` उपयोग करें।
rowspan	संख्या	हेडर सेल द्वारा फैलाई गई पंक्तियों की संख्या।
scope	col, colgroup, row, rowgroup	हेडर सेल के दायरे को परिभाषित करता है (पहुंच के लिए महत्वपूर्ण)।
valign	top, middle, bottom, baseline	निरस्त - लंबवत संरेखण। CSS `vertical-align` उपयोग करें।
width	पिक्सेल या %	निरस्त - हेडर सेल की चौड़ाई। CSS `width` उपयोग करें।

उदाहरण

निम्नलिखित कोड HTML में टेबल हेडिंग बनाने का तरीका दर्शाता है:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML th Tag</title>
    <style>
      table { border-collapse: collapse; width: 100%; }
      th, td { border: 1px solid black; padding: 10px; text-align: center; }
      th { background-color: #34495e; color: white; }
    </style>
  </head>
  <body>
    <h3>परिणाम</h3>
    <table>
      <tr>
        <th scope="col">अंक</th>
        <th scope="col">छात्र</th>
      </tr>
      <tr>
        <td>600</td>
        <td>अमित</td>
      </tr>
      <tr>
        <td>400</td>
        <td>अनिल</td>
      </tr>
    </table>
  </body>
</html>

scope विशेषता का महत्व

scope विशेषता स्क्रीन रीडर्स के लिए महत्वपूर्ण है:

scope="col" - यह हेडर एक कॉलम के लिए है
scope="row" - यह हेडर एक पंक्ति के लिए है
scope="colgroup" - कॉलम समूह के लिए
scope="rowgroup" - पंक्ति समूह के लिए

colspan और rowspan उदाहरण

<tr>
  <th colspan="2">सेमेस्टर 1</th>
  <th colspan="2">सेमेस्टर 2</th>
</tr>
<tr>
  <th>विषय</th>
  <th>अंक</th>
  <th>विषय</th>
  <th>अंक</th>
</tr>