HTML Table Tags क्या हैं?

HTML में Table Tags का उपयोग डेटा को व्यवस्थित तरीके से दिखाने के लिए किया जाता है। जब हमें किसी जानकारी को rows और columns के रूप में प्रस्तुत करना होता है, तब HTML Tables सबसे उपयोगी होते हैं।

उदाहरण के लिए:

• Student Data
• Product List
• Pricing Tables
• Reports

HTML Table क्या है?

HTML Table एक ऐसा element है जो data को rows (पंक्तियों) और columns (स्तंभों) में व्यवस्थित करता है।

HTML Table Structure (संरचना)

HTML Table मुख्य रूप से इन टैग्स से मिलकर बनता है:

Ordered List (मुख्य टैग्स)

1. <table> – पूरी टेबल को define करता है
2. <tr> – Table Row (पंक्ति)
3. <td> – Table Data (सेल)
4. <th> – Table Header

Basic HTML Table Example

<table border="1">
  <tr>
    <th>नाम</th>
    <th>उम्र</th>
  </tr>
  <tr>
    <td>रवि</td>
    <td>25</td>
  </tr>
</table>

HTML Table Tags का विस्तार से विवरण

1. <table> Tag

यह टैग पूरी टेबल को define करता है।

Example:

<table>
  <!-- content -->
</table>

2. <tr> Tag (Table Row)

यह एक row बनाता है।

Example:

<tr>
  <td>Data</td>
</tr>

3. <td> Tag (Table Data)

यह टेबल के अंदर data दिखाने के लिए उपयोग होता है।

4. <th> Tag (Table Header)

यह header cell के लिए उपयोग होता है और default रूप से bold होता है।

Advanced Table Tags (उन्नत टैग्स)

Unordered List (Advanced Tags)

• <thead> – Header section
• <tbody> – Body section
• <tfoot> – Footer section
• <caption> – Table Title
• <colgroup> – Column group
• <col> – Column properties

5. <thead> Tag

यह header section को define करता है।

<thead>
  <tr>
    <th>Name</th>
  </tr>
</thead>

6. <tbody> Tag

यह main data को रखता है।

7. <tfoot> Tag

यह footer के लिए उपयोग होता है।

8. <caption> Tag

टेबल का शीर्षक दिखाने के लिए उपयोग होता है।

<caption>Student List</caption>

9. <colgroup> और <col> Tag

ये column styling के लिए उपयोग होते हैं।

HTML Table Attributes (गुण)

Ordered List (Important Attributes)

1. border – बॉर्डर दिखाने के लिए
2. cellpadding – सेल के अंदर spacing
3. cellspacing – सेल के बीच spacing
4. colspan – कॉलम merge करने के लिए
5. rowspan – row merge करने के लिए

Colspan Example

<td colspan="2">Merged Column</td>

Rowspan Example

<td rowspan="2">Merged Row</td>

Complete HTML Table Example

<table border="1">
  <caption>Student Data</caption>

  <thead>
    <tr>
      <th>नाम</th>
      <th>कक्षा</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>रवि</td>
      <td>10</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">End</td>
    </tr>
  </tfoot>
</table>

CSS के साथ Table Styling

Basic Styling Example

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 10px;
}

SEO के लिए HTML Tables क्यों जरूरी हैं?

Unordered List (SEO Benefits)

• Data को structured बनाते हैं
• User Experience बेहतर होता है
• Content readable होता है
• Google indexing में मदद मिलती है

Best Practices (सर्वश्रेष्ठ तरीके)

Ordered List

1. हमेशा <th> का उपयोग करें
2. Proper <thead> और <tbody> रखें
3. Mobile responsive बनाएं
4. CSS से styling करें
5. Accessibility के लिए scope attribute का उपयोग करें

Accessibility Tips (सुगमता)

Unordered List

• Screen readers के लिए <th> जरूरी
• scope="col" या scope="row" उपयोग करें
• Caption जरूर दें

Common Mistakes (आम गलतियां)

Ordered List

1. Table को layout के लिए उपयोग करना
2. <th> का उपयोग न करना
3. CSS की जगह inline styling करना
4. Responsive design न बनाना

Responsive Table कैसे बनाएं?

table {
  width: 100%;
  overflow-x: auto;
}

Practice Section (अभ्यास)

Task 1:

Student Table बनाएं जिसमें नाम, उम्र, क्लास हो

Task 2:

Colspan और Rowspan का उपयोग करें

Task 3:

CSS से styling करें

निष्कर्ष (Conclusion)

HTML Table Tags किसी भी वेबसाइट में structured data दिखाने के लिए बहुत महत्वपूर्ण हैं। सही तरीके से इनका उपयोग करने पर न केवल UI बेहतर होता है बल्कि SEO में भी फायदा मिलता है।