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.

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

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.

<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>

  

  

    
Name
    
Jill
  
  

    
Phone
    
555-1234
  
  

    
555-8745
  

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