HTML Table Colspan & Rowspan

HTML Table में Colspan और Rowspan का उपयोग cells को merge करने के लिए किया जाता है।
इनकी मदद से complex table structures आसानी से बनाई जा सकती हैं।

Colspan क्या होता है

colspan attribute एक cell को multiple columns तक फैलाने के लिए उपयोग होता है।
यह horizontal merging करता है।

Colspan का Basic Syntax

<td colspan="2">Total</td>

यह cell दो columns की जगह लेगा।

Simple Colspan Example

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Math</td>
    <td>90</td>
  </tr>
</table>

यहाँ “Marks” header दो columns में फैला हुआ है।

Colspan का Practical Use

Colspan का उपयोग अक्सर इन situations में होता है: Table header grouping
Total या summary row
Invoice और report tables

Rowspan क्या होता है

rowspan attribute एक cell को multiple rows तक फैलाने के लिए उपयोग होता है।
यह vertical merging करता है।

Rowspan का Basic Syntax

<td rowspan="2">Admin</td>

यह cell दो rows की height लेगा।

Simple Rowspan Example

<table border="1">
  <tr>
    <th>User</th>
    <th>Role</th>
  </tr>
  <tr>
    <td rowspan="2">Amit</td>
    <td>Editor</td>
  </tr>
  <tr>
    <td>Moderator</td>
  </tr>
</table>

यहाँ “Amit” नाम दो rows में merge किया गया है।

Colspan और Rowspan साथ में

Colspan और Rowspan को एक ही table में साथ भी use किया जा सकता है।

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Scores</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

यह complex data representation के लिए बहुत common pattern है।

Header Cells में Colspan & Rowspan

<th> tag के साथ भी colspan और rowspan use किया जा सकता है।

<th colspan="3">Student Details</th>

Headers में grouping दिखाने के लिए यह बहुत useful होता है।

Table Structure का ध्यान रखना

Colspan और Rowspan use करते समय total columns और rows का balance सही होना चाहिए।
अगर structure गलत होगा तो table टूट सकती है।

Wrong structure से: Cells misalign हो सकते हैं
Data confusing दिख सकता है

Accessibility और Colspan/Rowspan

Complex tables में screen readers को data समझने में दिक्कत हो सकती है।
ऐसे cases में: Clear headers रखें
Logical grouping करें
scope attribute का सही use करें

Common Mistakes

गलत colspan value देना
Rowspan के बाद extra <td> add कर देना
Complex tables बिना planning बनाना
Readability ignore करना

Best Practices

Colspan और Rowspan का limited use करें
Table structure पहले plan करें
Headers को clear रखें
Data readability को priority दें

Real World Use Cases

Exam result tables
Invoice layouts
Employee reports
Comparison charts

Summary

HTML Table में Colspan columns को merge करता है और Rowspan rows को merge करता है।
इनसे complex और structured tables बनती हैं।
Proper planning और clear structure के साथ इनका use professional tables के लिए जरूरी होता है।