HTML Colspan & Rowspan Guide

Learn how to create complex table layouts using colspan and rowspan attributes

Introduction to Colspan & Rowspan

The colspan and rowspan attributes allow table cells to span multiple columns or rows, enabling you to create more complex and visually appealing table layouts. These attributes are essential for creating headers that span multiple columns, vertical labels, and merged cells in data tables.

Basic Examples

Basic Colspan

Header spanning multiple columns

Employee Details
John Doe	johndoe@example.com

<table>
  <tr>
    <th colspan="2">Employee Details</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>johndoe@example.com</td>
  </tr>
</table><table>
  <tr>
    <th colspan="2">Employee Details</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>johndoe@example.com</td>
  </tr>
</table>

Basic Rowspan

Cell spanning multiple rows

Department	Employees
Department	25

<table>
  <tr>
    <th rowspan="2">Department</th>
    <th>Employees</th>
  </tr>
  <tr>
    <td>25</td>
  </tr>
</table><table>
  <tr>
    <th rowspan="2">Department</th>
    <th>Employees</th>
  </tr>
  <tr>
    <td>25</td>
  </tr>
</table>

Combined Example

Using both colspan and rowspan together

Name	Contact
Name	Email	Phone
John Doe	john@example.com	555-1234

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
</table><table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
</table>

Advanced Examples

Complex Layout

Advanced table with multiple spans

Product	Quarterly Sales
Product	Q1	Q2	Q3
Laptops	$120,000	$135,000	$150,000
Laptops	Total: $405,000

<table>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="3">Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td rowspan="2">Laptops</td>
    <td>$120,000</td>
    <td>$135,000</td>
    <td>$150,000</td>
  </tr>
  <tr>
    <td colspan="3">Total: $405,000</td>
  </tr>
</table><table>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="3">Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td rowspan="2">Laptops</td>
    <td>$120,000</td>
    <td>$135,000</td>
    <td>$150,000</td>
  </tr>
  <tr>
    <td colspan="3">Total: $405,000</td>
  </tr>
</table>

Schedule Table

Timetable with row and column spans

Time	Monday	Tuesday	Wednesday
9:00-11:00	Math	Science Lab	History
9:00-11:00	Physics		Geography
11:00-12:00	Break

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td rowspan="2">9:00-11:00</td>
    <td>Math</td>
    <td rowspan="3">Science Lab</td>
    <td>History</td>
  </tr>
  <tr>
    <td>Physics</td>
    <td>Geography</td>
  </tr>
  <tr>
    <td>11:00-12:00</td>
    <td colspan="2">Break</td>
  </tr>
</table><table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td rowspan="2">9:00-11:00</td>
    <td>Math</td>
    <td rowspan="3">Science Lab</td>
    <td>History</td>
  </tr>
  <tr>
    <td>Physics</td>
    <td>Geography</td>
  </tr>
  <tr>
    <td>11:00-12:00</td>
    <td colspan="2">Break</td>
  </tr>
</table>

Accessibility Tips

Accessible Complex Tables

Using scope, headers, and ARIA attributes

Monthly Budget
Category	January	February
Income	$5,000	$5,200
Expenses
Rent	$1,200	$1,200

<table>
  <caption>Monthly Budget</caption>
  <thead>
    <tr>
      <th id="category" scope="col">Category</th>
      <th id="jan" scope="col">January</th>
      <th id="feb" scope="col">February</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="income" headers="category" scope="row">Income</th>
      <td headers="income jan">$5,000</td>
      <td headers="income feb">$5,200</td>
    </tr>
    <tr>
      <th id="expenses" headers="category" scope="rowgroup" colspan="2">Expenses</th>
    </tr>
    <tr>
      <th id="rent" headers="category expenses" scope="row">Rent</th>
      <td headers="rent jan">$1,200</td>
      <td headers="rent feb">$1,200</td>
    </tr>
  </tbody>
</table><table>
  <caption>Monthly Budget</caption>
  <thead>
    <tr>
      <th id="category" scope="col">Category</th>
      <th id="jan" scope="col">January</th>
      <th id="feb" scope="col">February</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="income" headers="category" scope="row">Income</th>
      <td headers="income jan">$5,000</td>
      <td headers="income feb">$5,200</td>
    </tr>
    <tr>
      <th id="expenses" headers="category" scope="rowgroup" colspan="2">Expenses</th>
    </tr>
    <tr>
      <th id="rent" headers="category expenses" scope="row">Rent</th>
      <td headers="rent jan">$1,200</td>
      <td headers="rent feb">$1,200</td>
    </tr>
  </tbody>
</table>

< Previous Next >