Column and Row Spanning

The colspan attribute makes a cell span multiple columns. The rowspan attribute makes a cell span multiple rows. Both accept an integer value indicating how many columns or rows to occupy.

Planning Spans

When a cell spans multiple rows or columns, the cells it "covers" must be removed from the affected rows. Forgetting this results in broken table layouts. It helps to sketch the table on paper before coding — mark which cells are merged and count the remaining cells per row carefully.

colspan="2" — Cell spans 2 columns
rowspan="3" — Cell spans 3 rows

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Spanning</title>
  <style>
    table { border-collapse: collapse; }
    th, td {
      border: 1px solid #aaa;
      padding: 10px 14px;
      text-align: center;
    }
    th { background: #e0e0e0; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="3">Q1 Sales Report</th>
    </tr>
    <tr>
      <th>Month</th>
      <th>Product A</th>
      <th>Product B</th>
    </tr>
    <tr>
      <td>January</td>
      <td rowspan="2">Combined: 500</td>
      <td>200</td>
    </tr>
    <tr>
      <td>February</td>
      <td>180</td>
    </tr>
    <tr>
      <td>March</td>
      <td>260</td>
      <td>220</td>
    </tr>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Double-check your cell count after adding any colspan or rowspan — every row must account for the same total number of column units. A mismatch produces jagged, broken table rendering.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned