HTML के पहले कदम - पाठ 5 - सारणियाँ (टेबल्स)

जानकारी को संरक्षित करने के सबसे महत्वपूर्ण रूपों में से एक है सारणी (टेबल)। Excel, Access और अन्य डेटाबेस भी जानकारी को तालिकाओं के रूप में संग्रहीत करते हैं। टेबल डेटा को स्पष्ट रूप से प्रदर्शित करने का एक सुविधाजनक तरीका है — इनसे ग्राफ़ और चार्ट बनाना भी आसान होता है।
इस पाठ में हम सीखेंगे कि HTML में टेबल कैसे बनाई जाती है। इसके लिए हम निम्नलिखित टैग्स का उपयोग करेंगे: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>.

table टैग

<table> टेबल का मुख्य टैग है। इसके अंदर सभी अन्य टेबल टैग्स रखे जाते हैं।

<table>
</table>

बाकी सभी टैग्स हम इसी टैग के अंदर लिखेंगे।

tr टैग

<tr> टैग एक पंक्ति (row) को दर्शाता है। प्रत्येक पंक्ति को <tr></tr> के अंदर रखा जाता है। यदि हम टेबल में तीन पंक्तियाँ बनाना चाहते हैं, तो हमें तीन जोड़े tr टैग्स लिखने होंगे:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

td टैग

<td> टैग एक कोशिका (cell) को दर्शाता है। प्रत्येक कोशिका को किसी पंक्ति (tr) के अंदर रखा जाना चाहिए। टेबल को सही ढंग से प्रदर्शित करने के लिए प्रत्येक पंक्ति में समान संख्या में कोशिकाएँ होनी चाहिए। चलिए एक ऐसी टेबल बनाते हैं जिसमें प्रत्येक पंक्ति में चार कोशिकाएँ हों:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

अब हम इस टेबल को डेटा से भरते हैं:

<table>
  <tr>
    <td>क्रमांक</td>
    <td>उपनाम</td>
    <td>नाम</td>
    <td>पितृनाम</td>
  </tr>
  <tr>
    <td>1</td>
    <td>इवानोव</td>
    <td>इवान</td>
    <td>इवानोविच</td>
  </tr>
  <tr>
    <td>2</td>
    <td>पेत्रोव</td>
    <td>प्योत्र</td>
    <td>पेत्रोविच</td>
  </tr>
</table>

अब हम टेबल को तार्किक रूप से संरचित कर सकते हैं, इसे तीन भागों में विभाजित करके: thead (शीर्षक), tbody (मुख्य भाग), और tfoot (फ़ुटर या नीचे का भाग)।

tbody टैग

<tbody> अनिवार्य नहीं है, लेकिन इसका उपयोग यह दर्शाने के लिए किया जाता है कि यह टेबल का मुख्य भाग है।

<table>
  <tbody>
    <tr>
      <td>क्रमांक</td>
      <td>उपनाम</td>
      <td>नाम</td>
      <td>पितृनाम</td>
    </tr>
    <tr>
      <td>1</td>
      <td>इवानोव</td>
      <td>इवान</td>
      <td>इवानोविच</td>
    </tr>
    <tr>
      <td>2</td>
      <td>पेत्रोव</td>
      <td>प्योत्र</td>
      <td>पेत्रोविच</td>
    </tr>
  </tbody>
</table>

thead टैग

<thead> टेबल के शीर्षक (हेडर) को बनाने के लिए उपयोग किया जाता है। चलिए पहली पंक्ति को thead में रखते हैं:

<table>
  <thead>
    <tr>
      <td>क्रमांक</td>
      <td>उपनाम</td>
      <td>नाम</td>
      <td>पितृनाम</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>इवानोव</td>
      <td>इवान</td>
      <td>इवानोविच</td>
    </tr>
    <tr>
      <td>2</td>
      <td>पेत्रोव</td>
      <td>प्योत्र</td>
      <td>पेत्रोविच</td>
    </tr>
  </tbody>
</table>

अब हम शीर्षक कोशिकाओं (td) की जगह th टैग का उपयोग करेंगे ताकि यह दर्शाया जा सके कि ये कॉलम के नाम हैं:

<table>
  <thead>
    <tr>
      <th>क्रमांक</th>
      <th>उपनाम</th>
      <th>नाम</th>
      <th>पितृनाम</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>इवानोव</td>
      <td>इवान</td>
      <td>इवानोविच</td>
    </tr>
    <tr>
      <td>2</td>
      <td>पेत्रोव</td>
      <td>प्योत्र</td>
      <td>पेत्रोविच</td>
    </tr>
  </tbody>
</table>

यदि आपका ब्राउज़र सही ढंग से काम कर रहा है, तो शीर्षक (थ) कोशिकाएँ कम से कम बोल्ड में दिखाई देंगी। अब टेबल के नीचे वाले भाग के लिए एक और टैग बचा है — tfoot।

tfoot टैग

<tfoot> टैग का उपयोग टेबल के नीचे एक टिप्पणी या फ़ुटर जोड़ने के लिए किया जाता है:

<table>
  <thead>
    <tr>
      <th>क्रमांक</th>
      <th>उपनाम</th>
      <th>नाम</th>
      <th>पितृनाम</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>इवानोव</td>
      <td>इवान</td>
      <td>इवानोविच</td>
    </tr>
    <tr>
      <td>2</td>
      <td>पेत्रोव</td>
      <td>प्योत्र</td>
      <td>पेत्रोविच</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>टेबल बनाई गई वर्ष 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

colspan गुण

colspan गुण <td> टैग के लिए सबसे उपयोगी गुणों में से एक है — यह कोशिकाओं को मिलाने (merge) की अनुमति देता है। चलिए हमारे फ़ुटर को देखें। इसमें चार कोशिकाएँ हैं, लेकिन केवल एक में टेक्स्ट है। हम इन्हें एक ही कोशिका में जोड़ सकते हैं:

<table>
  <thead>
    <tr>
      <th>क्रमांक</th>
      <th>उपनाम</th>
      <th>नाम</th>
      <th>पितृनाम</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>इवानोव</td>
      <td>इवान</td>
      <td>इवानोविच</td>
    </tr>
    <tr>
      <td>2</td>
      <td>पेत्रोव</td>
      <td>प्योत्र</td>
      <td>पेत्रोविच</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">टेबल बनाई गई वर्ष 2012</td>
    </tr>
  </tfoot>
</table>

अब हमारे पास एक बड़ी कोशिका है जो चार कॉलम की चौड़ाई को कवर करती है। colspan गुण का मान उन कोशिकाओं की संख्या बताता है जिन्हें जोड़ा गया है।