In this lesson, you'll learn how to merge table cells either horizontally or vertically using the colspan and rowspan attributes. These attributes give you greater control over the layout and organization of your tables.

What Are Colspan and Rowspan?

• Colspan: The colspan attribute allows you to merge two or more adjacent cells in a row into a single cell. This is useful when you want a cell to span multiple columns.
• Rowspan: The rowspan attribute allows you to merge cells vertically across multiple rows. This is helpful when you need a cell to cover multiple rows.

Syntax

• Colspan Syntax:

  <td colspan="number">Content</td>

  • The cell will extend across the specified number of columns.

• Rowspan Syntax:

  <td rowspan="number">Content</td>

  • The cell will extend vertically across the specified number of rows.

Example: Table with Colspan and Rowspan

Below is a complete HTML example that demonstrates the use of both colspan and rowspan in a table. This example creates a sales report table where the title spans multiple columns and one cell spans multiple rows.

Explanation:

• Colspan (colspan="3"):
  In the first row, the <th> cell spans three columns to display the table title "Annual Sales Report" across the entire table width.

• Rowspan (rowspan="2"):
  In the data rows, the first cell containing "Laptops" uses rowspan="2" to span two rows. This means it will cover both the current row and the following row, effectively merging them vertically.

• Structure:
  The table is organized with a title row, a header row, and data rows. The use of colspan and rowspan helps create a clear and organized layout by merging cells where needed.

These attributes are essential for customizing table layouts to better present and structure data on your web pages. In the next lesson, we'll explore HTML Nested Tables, where you'll learn how to embed tables within tables to organize complex information even further.