Write an HTML program to create a table with colspan and rowspan

Description: Create a small timetable with a heading cell that covers two columns, and one subject name that covers two rows.

Hint:

• colspan merges cells in a row, and rowspan merges cells in a column.
• Remove the cells that are covered by the merged cell.

---

HTML program for colspan and rowspan

<table border="1">
  <tr>
    <th colspan="2">Monday Timetable</th>
  </tr>
  <tr>
    <td rowspan="2">Morning</td>
    <td>Maths</td>
  </tr>
  <tr>
    <td>Science</td>
  </tr>
  <tr>
    <td>Afternoon</td>
    <td>Sports</td>
  </tr>
</table>

Output in the browser:

How it works

• The heading cell has colspan="2", so it covers both columns.
• “Morning” has rowspan="2", so it covers two rows. Because of this, the “Science” row has only one cell.
• The border="1" attribute is used here only to keep the code short. In real pages use CSS borders.

Read Rowspan and Colspan.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.