Tables
colspan & rowspan
Cells Ko Merge Karna
💡 colspan/rowspan Excel mein "Merge Cells" jaisa hai — jaise ek heading jo multiple columns ke upar span kare (colspan), ya ek category jo multiple rows ke liye common ho (rowspan).
colspan="n" ek cell ko HORIZONTALLY n columns tak span karne deta hai. rowspan="n" ek cell ko VERTICALLY n rows tak span karne deta hai. Ye complex tables (jaise grouped headers, merged categories) banane ke liye zaroori hain.
<table border="1">
<tr>
<th colspan="2">Student Info</th>
<th>Marks</th>
</tr>
<tr>
<td>Aarav</td>
<td>20 saal</td>
<td>85</td>
</tr>
</table>
<!-- "Student Info" heading 2 columns ke upar span karta hai -->
<table border="1">
<tr>
<td rowspan="2">Fruits</td>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
<!-- "Fruits" cell 2 rows tak vertically span karta hai -->🔀
colspan/rowspan Excel mein "Merge Cells" jaisa hai — jaise ek heading jo multiple columns ke upar span kare (colspan), ya ek category jo multiple rows ke liye common ho (rowspan).
1 / 2
⚡ Quick Recap
- colspan = horizontally multiple columns span
- rowspan = vertically multiple rows span
- Complex/grouped table headers banane ke liye zaroori
Is page mein (2 subtopics)
Real-world example: ek weekly timetable jaha ek subject multiple time-slots ke liye common ho sakta hai (rowspan), ya ek "Lunch Break" heading poori width span kare (colspan).
<table border="1">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10 AM</td>
<td rowspan="2">Math (Double Period)</td>
<td>Science</td>
</tr>
<tr>
<td>10-11 AM</td>
<td>English</td>
</tr>
<tr>
<td colspan="3">Lunch Break</td>
</tr>
</table>Tip: Complex spans plan karte waqt, pehle table ko paper par sketch karna helpful hai — visually samajhna aasan hota hai kaunse cells span honge, code likhne se pehle.
Bahut zyada colspan/rowspan wali complex tables screen readers ke liye confusing ho sakti hain — agar possible ho, simpler table structure ya multiple simple tables prefer karo complex merged ek se.
<!-- Agar table BAHUT complex ho rahi hai spans ki wajah se,
consider karo: kya isse 2 simple tables mein split kiya ja sakta hai? -->Common Mistake: Overly complex tables (bahut saare nested spans) accessibility ke liye bura hai — screen reader users ke liye samajhna mushkil ho jaata hai data kis row/column se belong karta hai.