MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
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:
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:
colspan (Column Span): Merges cells horizontally across multiple columns (left to right ↔️).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!
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"}$$
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!
colspan: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.
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"}$$
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!
rowspan: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.
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.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):
Make rows highlight when the user hovers their mouse:
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!
colspan or rowspan on <tr>Rows cannot span columns. Only individual cells (<th> or <td>) can have colspan or rowspan!
rowspanRemember 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!
colspan merges cells horizontally across columns (left to right ↔️).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 ↕️).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>).Test your understanding with these multiple-choice questions:
<td colspan="3">, how many more <td> cells can you add to that row?colspan attribute?rowspan="2", how many cells should you omit from the corresponding column in Row 2?Open VS Code and create a file named school-sports-schedule.html.
Create a "School Annual Sports Day Tournament Schedule":
Time Slot, Court / Field, Sport Event, and Age Category.<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".<td rowspan="2"> in the Sport Event column to show a 2-hour Double-Slot Cricket Final!Congratulations! You have completed Chapter 8: Tables! You can now organize complex numerical data, marks, and schedules like a professional web developer!
In the next lesson, we will continue your web development journey with Block vs Inline Elements (Block & Inline).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HTML Tables | Block vs Inline Elements |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.