← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 21 of 26

HTML Colspan & Rowspan

एक basic HTML table एक strict grid है जहां हर row में cells की संख्या समान होती है। लेकिन real data को अक्सर एक single cell को visually कई columns में फैलाने की जरूरत होती है (जैसे पूरी table width में फैली एक section title) या कई rows में (जैसे कई related rows के बगल में एक category label)। colspan और rowspan attributes एक cell को उस space में merge होने देते हैं जो अन्यथा कई ordinary cells occupy करतीं।

In this page:

  1. colspan से Columns को Span करना
  2. rowspan से Rows को Span करना
  3. colspan और rowspan को साथ Combine करना
  4. एक Complex Schedule Table बनाना
  5. Spanned Cells के लिए Accessibility Considerations
Syntax
markup 
<td colspan="number">Spans columns</td>
<td rowspan="number">Spans rows</td>

colspan से Columns को Span करना

किसी <td> या <th> पर colspan="2" उस single cell को दो साधारण columns जितनी जगह में फैला देता है, जिसका मतलब है कि उसे रखने वाली row में table की बाकी rows की तुलना में grid alignment बनाए रखने के लिए एक cell कम होनी चाहिए।

यह किसी table में full-width section title row बनाने की standard technique है।

Note:
  • जब कोई cell colspan="3" उपयोग करे, तो उसी row में उसके बाद आने वाली दो normal cells हटा दें।
  • Accepted values:
  • colspan — positive integer (default 1)
  • td और th पर valid
Warning: colspan जोड़ने के बाद replaced cells को हटाना भूल जाना एक row बना देता है जिसमें बहुत सारी cells होती हैं, जो table के column alignment को तोड़ देता है।

उदाहरण: Spanning Columns with colspan

markup 
<table>
  <tr>
    <td colspan="2">Full width title</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

rowspan से Rows को Span करना

किसी <td> या <th> पर rowspan="2" उस single cell को vertically दो rows जितनी जगह में फैला देता है, जिसका मतलब है कि जिन rows में यह फैलता है उनमें से हर एक में एक cell कम होनी चाहिए, क्योंकि वह column position पहले से ऊपर की spanning cell से भरी हुई है।

Note:
  • जब कोई cell rowspan="3" उपयोग करे, तो अगली दो rows से पूरी तरह वही column position हटा दें।
  • Accepted values:
  • rowspan — non-negative integer (default 1)
  • 0 row group के अंत तक फैलता है
Warning: एक mismatched rowspan count, जहां आने वाली row अभी भी उस cell को include करती है जिसे span replace करने वाला था, table के row alignment को तोड़ देता है।

उदाहरण: Spanning Rows with rowspan

markup 
<table>
  <tr>
    <td rowspan="2">Spans two rows</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

colspan और rowspan को साथ Combine करना

कोई single cell colspan और rowspan को साथ उपयोग कर सकती है, जो एक साथ कई columns और कई rows के एक rectangular block में फैलती है -- यह किसी matrix-style table में corner label cell के लिए उपयोगी है जहां उसे एक से ज़्यादा row और column पर कब्जा करना हो।

Note:
  • दोनों attributes को combine करते समय पहले कागज़ पर intended grid स्केच करें, क्योंकि यह track करना कि exactly कौन सी cells consume हो रही हैं जल्दी complex हो जाता है।
  • Accepted attributes:
  • colspan — positive integer
  • rowspan — non-negative integer
Warning: colspan और rowspan को गलत तरीके से combine करना एक visually broken, misaligned table grid पैदा करने के सबसे आसान तरीकों में से एक है।

उदाहरण: Combining colspan and rowspan

markup 
<table>
  <tr>
    <td rowspan="2" colspan="2">Corner label</td>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
</table>

एक Complex Schedule Table बनाना

colspan और rowspan मिलकर बिल्कुल वही संभव बनाते हैं जो weekly class schedule जैसी आम असल-दुनिया की tables को possible बनाता है, जहां एक single multi-hour class block कई time-row slots में फैलता है, या एक merged header पूरे दिन के column में फैलता है।

Note: complex spanning tables को धीरे-धीरे बनाएं, एक बार में एक spanned cell जोड़ें और अगली जोड़ने से पहले alignment जांचें।
Warning: बहुत सारे overlapping spans वाली एक schedule table को subtly गलत करना आसान है; इसे ship करने से पहले कई browsers पर visually test करें।

उदाहरण: Building a Complex Schedule Table

markup 
<table>
  <tr>
    <th>Time</th>
    <th colspan="2">Monday</th>
  </tr>
  <tr>
    <td>9am</td>
    <td rowspan="2">Math Class</td>
  </tr>
</table>

Spanned Cells के लिए Accessibility Considerations

Spanned cells screen reader users को confuse कर सकती हैं अगर reading order स्पष्ट न हो, क्योंकि एक merged cell simple one-cell-per-row-per-column वाली assumption को तोड़ देती है।

scope जोड़ना, और complex मामलों के लिए headers/id association technique, assistive technology को सही ढंग से यह announce करने में मदद करता है कि कौन सा spanned header किस data cell पर लागू होता है।

Note: भारी colspan/rowspan उपयोग वाली किसी भी table को screen reader से test करें, क्योंकि spanned tables में visual layout और reading order ज़्यादा आसानी से अलग हो सकते हैं।
Warning: genuine data structure के बजाय सिर्फ visual layout के लिए spans को overuse करना आम तौर पर discourage किया जाता है -- pure visual layout needs के लिए CSS Grid अक्सर एक बेहतर tool है।

उदाहरण: Accessibility Considerations for Spanned Cells

markup 
<table>
  <tr>
    <th id="monday" scope="col">Monday</th>
  </tr>
  <tr>
    <td headers="monday">Math Class</td>
  </tr>
</table>
Live Example
Related Topics

HTML Table Padding & Spacing · HTML Table Styling · HTML Table Headers · HTML Table Colgroup

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Padding & Spacing Next Lesson → HTML Table Styling

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.