सरल तालिकाएँ

table, tr, th और td टैग के साथ डेटा को पंक्तियों और स्तंभों में प्रस्तुत करें।

6 मिनट · 3 प्रश्न

एक समय-सारणी, एक मूल्य सूची, एक खेल रैंकिंग: कुछ जानकारी स्वाभाविक रूप से पंक्तियों और स्तंभों में पढ़ी जाती है। HTML तालिकाएँ इसी के लिए हैं। शुरुआत करने के लिए तीन टैग पर्याप्त हैं: <table> पूरी तालिका को लपेटता है, <tr> (table row) एक पंक्ति बनाता है, और <td> (table data) एक पंक्ति के अंदर एक सेल बनाता है।

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

प्रत्येक स्तंभ को एक शीर्षक देने के लिए, पहली पंक्ति में <td> को <th> (table header) से बदलें। ब्राउज़र इन शीर्षक सेलों को मोटे अक्षरों में और केंद्रित दिखाता है, जिससे ये डेटा से अलग दिखते हैं।

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

ब्राउज़र तालिका को पंक्ति दर पंक्ति बनाता है: प्रत्येक <tr> की पहली सेल पहले स्तंभ में आती है, दूसरी सेल दूसरे स्तंभ में, और इसी तरह। डिफ़ॉल्ट रूप से, एक तालिका बिना दृश्यमान किनारों के दिखती है: यह सामान्य है - दिखावट (रेखाएँ, रंग, अंतराल) को बाद में CSS से संभाला जाएगा।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. कौन सा टैग एक तालिका पंक्ति बनाता है?
   • <td>
   • <tr>
   • <table>
   • <row>
2. <td> और <th> में क्या अंतर है?
   • <th> एक शीर्षक सेल बनाता है, <td> एक डेटा सेल
   • <th> एक पूरी तालिका बनाता है, <td> एक पंक्ति
   • कोई नहीं, दोनों आपस में बदले जा सकते हैं
3. एक HTML तालिका का उपयोग किसलिए किया जाना चाहिए?
   • पूरी साइट का लेआउट बनाने के लिए
   • डेटा को पंक्तियों और स्तंभों में प्रस्तुत करने के लिए
   • बुलेट सूचियों को बदलने के लिए