Table Types

🔗 Colspan & Rowspan — Cells Merge Karo

<td colspan="2">Merged across 2 columns</td>

Colspan aur rowspan jaise Excel mein cells merge karna — 3 cells horizontally select karo → "Merge Cells" → ek badi cell 3 columns pe. Vertically bhi same. Yeh sabse powerful table feature hai.

colspan cells ko horizontally merge karta hai (columns pe). rowspan cells ko vertically merge karta hai (rows pe). Tricky part: rowspan use karne pe jo cell "absorb" hota hai usko next row se manually remove karna padta hai — warna table toot jaata hai.

🛺

Excel Analogy: Excel mein cells select → right-click → "Merge Cells". HTML bhi waise karta hai par absorbed cells manually remove karne padte hain. Excel automatically karta hai — HTML nahi karta. Yeh #1 table mistake hai.

Code Example

HTML — Colspan & Rowspan — Cells Merge Karo

<!-- Colspan — columns merge -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Contact Info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@email.com</td>
      <td>+1-234-5678</td>
    </tr>
  </tbody>
</table>

<!-- Rowspan — rows merge -->
<table>
  <tr>
    <th>Category</th>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td rowspan="2">Drinks</td>
    <td>Irani Chai</td>
    <td>₹25</td>
  </tr>
  <!-- DHYAN: next row mein sirf 2 cells hain (Category td nahi hai) -->
  <tr>
    <td>Cold Coffee</td>
    <td>₹80</td>
  </tr>
</table>

<!-- Dono combined -->
<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>Morning</th>
      <th>Afternoon</th>
      <th>Evening</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Weekend</td>
      <td>Sleep in</td>
      <td>Biryani</td>
      <td>Movie</td>
    </tr>
    <tr>
      <td colspan="2">Brunch</td>
      <td>Walk</td>
    </tr>
    <tr>
      <td>Weekday</td>
      <td>Wake 6 AM</td>
      <td>Office</td>
      <td>Gym</td>
    </tr>
  </tbody>
</table>

colspan="2"2 columns ko ek wide cell mein merge

rowspan="2"2 rows ko ek tall cell mein merge

Absorbed cell removeZAROORI: rowspan jo cell cover kare usko next row se remove karo

Both combinedEk table mein colspan + rowspan = complex layouts

✅ When to Use

Category headers jo multiple columns pe span karte hain
Group labels jo multiple rows pe span karte hain
Summary/total cells jo full width pe span karte hain
Complex layouts jaise schedules aur timetables

❌ When NOT to Use

Simple tables jahan har cell 1x1 hai
Layout ke liye (CSS grid use karo)
Jab table padhne mein mushkil ho jaaye

💡

#1 table bug: absorbed cells bhoolna. Agar row 1 mein 3 tds hain aur ek pe rowspan="2" hai, toh row 2 mein sirf 2 tds hone chahiye. Dhyan se count karo!

← Back to Tables Chapter