Colspan & Rowspan (Merging Cells Like a Pro) 🧩

Welcome back! In the previous lesson, you learned how to create a basic table using <table>, <tr>, <th>, and <td>.

Now, imagine looking at your school's Weekly Class Timetable:

• On Friday afternoon, Periods 4 and 5 are combined into one single, extended Double Robotics & Computer Lab session!
• Every day at 12:00 PM, all classes pause for the Lunch Break. The lunch break doesn't need 6 separate little boxes; it stretches across the entire day as one big continuous banner!

In spreadsheet apps like Microsoft Excel or Google Sheets, this feature is called "Merge Cells".

In HTML, we don't have a "Merge" button. Instead, we have two powerful attributes:

1. 1
   colspan (Column Span): Merges cells horizontally across multiple columns (left to right ↔️).
2. 2
   rowspan (Row Span): Merges cells vertically down multiple rows (top to bottom ↕️).

Let's master how to use both without messing up your table layout!

1. The colspan Attribute (Horizontal Merging ↔️)

The word colspan stands for Column Span.

It tells the browser: "Hey, make this single cell stretch wider so it occupies the space of multiple columns!"

$$\text{colspan="number\_of\_columns"}$$

The Cardinal Rule of colspan:

If a normal row has 3 columns, and you tell one cell to take up 2 columns (colspan="2"), your row already has: $$2 + 1 = 3\text{ columns worth of space!}$$

Therefore, you must delete one <td> from that row! If you forget to delete it, that row will have an extra box sticking out of the table edge like a crooked brick!

Visualizing colspan:

Code Example: Total Marks Row

Notice how the bottom row only contains two <td> tags! The first <td> has colspan="2", so together they cleanly match the 3 columns above.

2. The rowspan Attribute (Vertical Merging ↕️)

The word rowspan stands for Row Span.

It tells the browser: "Make this single cell stretch downwards so it spans across multiple rows vertically!"

$$\text{rowspan="number\_of\_rows"}$$

The Cardinal Rule of rowspan:

When a cell in Row 1 has rowspan="2", it reaches down and occupies space in Row 2.

Therefore, when you write Row 2, you must write ONE FEWER <td> because that column is already filled by the cell reaching down from above!

Visualizing rowspan:

Code Example: Theory & Practical Marks

Look closely at the second <tr>. It only has two <td> elements! The first column is already claimed by <td rowspan="2">Science</td> from the row above.

3. Putting Both Together: School Timetable 🏆

Let's build a real school timetable that uses both colspan and rowspan!

• colspan="4" for the universal Lunch Break that spans all periods.
• rowspan="2" for a Double Practical Lab on Friday.

Pro Tips for Professional Table Styling 🎨

Tip 1: Zebra Striping (Easy-to-Read Alternate Rows)

When a table has 20 rows of student marks, it is easy for eyes to slip across lines. In CSS, you can color every even row with a soft background using :nth-child(even):

Tip 2: Hover Highlight

Make rows highlight when the user hovers their mouse:

Common Beginner Mistakes (And How to Avoid Them) ⚠️

1. ⚠️ The "Pushed-Out Box" Mistake (Forgetting to delete extra cells)

When you add colspan="2", you are adding width. You must remove one regular <td> from that row. Otherwise, the table will look broken with one cell hanging outside!

2. ⚠️ Putting colspan or rowspan on <tr>

Rows cannot span columns. Only individual cells (<th> or <td>) can have colspan or rowspan!

3. ⚠️ Adding extra cells in rows under a rowspan

Remember that rowspan pushes down into the row below. If your table has 3 columns and Row 1 spans into Row 2, Row 2 only needs 2 cells!

Quick Summary

• colspan merges cells horizontally across columns (left to right ↔️).
• When using colspan="N", you must remove (N - 1) cells from that row so the row stays balanced.
• rowspan merges cells vertically down rows (top to bottom ↕️).
• When using rowspan="N", subsequent rows covered by the span must contain fewer cells.
• colspan and rowspan can only be added to <th> or <td> tags (never to <tr>).
• You can combine both in the same table to build complex schedules, invoices, and timetables.

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which attribute is used to merge two or more columns horizontally?

A. colmerge B. colspan C. rowspan D. colwidth Answer: B Explanation: colspan (Column Span) merges a cell horizontally across multiple adjacent columns.

2. If a table has 4 columns and you write <td colspan="3">, how many more <td> cells can you add to that row?

A. 0 B. 1 C. 2 D. 3 Answer: B Explanation: A 4-column table can hold 4 column widths. If one cell takes 3 column widths, only $4 - 3 = 1$ remaining column space is available.

3. Which attribute is used to make a cell stretch vertically down across multiple rows?

A. rowspan B. rowmerge C. colspan D. vertical-align Answer: A Explanation: rowspan (Row Span) stretches a table cell downwards across multiple rows.

4. On which HTML tag can you legally apply the colspan attribute?

A. <table> B. <tr> C. <td> or <th> D. <tbody> Answer: C Explanation: colspan and rowspan are cell-level attributes and can only be placed on <td> (data cell) or <th> (header cell).

5. If a cell in Row 1 has rowspan="2", how many cells should you omit from the corresponding column in Row 2?

A. 0 cells B. 1 cell C. 2 cells D. 3 cells Answer: B Explanation: Because the cell from Row 1 already extends down into Row 2, that spot is already taken, so Row 2 must omit 1 cell.

Hands-on Practice Challenge 🎯

Open VS Code and create a file named school-sports-schedule.html.

Your Challenge:

Create a "School Annual Sports Day Tournament Schedule":

1. 1
   Header Row: Create 4 columns: Time Slot, Court / Field, Sport Event, and Age Category.
2. 2
   Morning Session: Add two matches (e.g. Badminton Under-14 and Table Tennis Under-16).
3. 3
   Opening Ceremony Banner: Use <td colspan="4"> to create a bold opening ceremony banner across all 4 columns: "10:00 AM — Grand Torch Lighting & March Past by Chief Guest".
4. 4
   Cricket Match: A cricket match takes two time slots (11:00 AM - 01:00 PM). Use <td rowspan="2"> in the Sport Event column to show a 2-hour Double-Slot Cricket Final!
5. 5
   Test your file in your browser and make sure all borders align perfectly without any crooked cells!

Congratulations! You have completed Chapter 8: Tables! You can now organize complex numerical data, marks, and schedules like a professional web developer!