Spanning Table Cells with `colspan` and `rowspan` in HTML

Learn how to create tables with cells that span multiple rows or columns using the `rowspan` and `colspan` attributes. This tutorial provides clear examples and explanations to improve your table design and readability.

Spanning Table Cells with `colspan` and `rowspan`

HTML tables offer the ability to make cells span multiple rows or columns, improving the visual organization and readability of your tables.

`colspan` Attribute: Spanning Columns

The colspan attribute allows a table cell to extend across multiple columns. The value of colspan specifies the number of columns the cell should occupy.

Example: `colspan` Attribute


<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
</table>

Output

Name          Age

Jill Smith    43

In this example, the "Name" header spans two columns.

`rowspan` Attribute: Spanning Rows

The rowspan attribute makes a cell extend across multiple rows. The value of rowspan indicates the number of rows the cell should cover.

Example: `rowspan` Attribute


<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td rowspan="2">Jill</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>

Output

  

  
    Name
    Jill
  
  
    Phone
    555-1234
  
  
    555-8745

Name	Jill
Phone	555-1234
555-8745

Here, "Jill's" name spans two rows.