colspan / rowspan

Since:		HTML 4(1997)

colspan merges cells horizontally across multiple columns, and rowspan merges cells vertically across multiple rows. To group columns, use <colgroup> and <col>.

Syntax

<table>
  <tr>
    <!-- Merge across 2 columns -->
    <td colspan="2">Cell merged horizontally</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Attributes / Tags

Attribute / Tag	Description
colspan	Specifies how many columns a cell spans horizontally. Used on `<td>` and `<th>`.
rowspan	Specifies how many rows a cell spans vertically. Used on `<td>` and `<th>`.
<colgroup>	Defines a group of columns in a table. Use it to apply CSS styles to multiple columns at once.
<col>	Represents an individual column inside `<colgroup>`. The `span` attribute lets you target multiple columns at once.

Sample Code

sample_colspan_rowspan.html

<table border="1">
  <!-- Column group (shade the first column gray) -->
  <colgroup>
    <col style="background-color: #eee;">
    <col span="2">
  </colgroup>

  <caption>Class Schedule</caption>
  <thead>
    <tr>
      <th scope="col">Period</th>
      <th scope="col">Monday</th>
      <th scope="col">Tuesday</th>
      <th scope="col">Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1st</th>
      <!-- colspan="2" merges Monday and Tuesday -->
      <td colspan="2">Intro to HTML</td>
      <td>Intro to CSS</td>
    </tr>
    <tr>
      <th scope="row">2nd</th>
      <td>JavaScript</td>
      <!-- rowspan="2" merges Tuesday for 2nd and 3rd periods -->
      <td rowspan="2">Intro to PHP</td>
      <td>Intro to Swift</td>
    </tr>
    <tr>
      <th scope="row">3rd</th>
      <td>Python</td>
      <!-- Tuesday cell is omitted because it is already covered by rowspan -->
      <td>Self-study</td>
    </tr>
  </tbody>
</table>

Result

A table with the caption "Class Schedule" is displayed. In the 1st period row, Monday and Tuesday are merged into a single cell labeled "Intro to HTML" using colspan="2". Tuesday in the 2nd and 3rd period rows is merged into a single cell labeled "Intro to PHP" using rowspan="2". The first column (Period) has a gray background.

View sample page

Notes

Cell merging makes table structure more complex: you must omit the corresponding cells from subsequent rows or columns equal to the number of merged cells. For example, when a row contains a cell with colspan="2", you remove one cell from that row for the spanned column. When a cell uses rowspan="2", you remove the cell at the corresponding position in the next row. Mistakes can break the layout significantly, so it helps to sketch the table structure on paper before writing the code.

<colgroup> and <col> let you apply CSS on a per-column basis — for example, to set a background color or width for specific columns. Place them immediately after <caption> and before <thead>.

For the basic table structure, see table / tr / td / th. For grouping elements, see thead / tbody / tfoot / caption.

Tips for Designing Merged Cell Tables

Tables with colspan and rowspan can easily break if not designed carefully. Keep the following in mind.

Common Mistake	Correct Approach
Adding extra td cells next to a merged cell (column count mismatch)	Calculate the actual number of columns after merging before placing the remaining td elements
Forgetting to remove td cells in rows covered by rowspan	For each row covered by a rowspan, remove the td for that column
Omitting the scope attribute, reducing accessibility	Use scope="colgroup" etc. together with colspan/rowspan

<!-- Example: using colspan and rowspan in a 3-column × 3-row table -->
<table border="1">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <!-- colspan="2" makes "Monthly Sales" span 2 columns -->
      <th scope="colgroup" colspan="2">Monthly Sales</th>
    </tr>
    <tr>
      <!-- The previous tr has a th with colspan="2", so this row needs 3 th total -->
      <th scope="col">(blank)</th>
      <th scope="col">Jan</th>
      <th scope="col">Feb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- rowspan="2" makes "Tokyo Store" span 2 rows -->
      <th scope="rowgroup" rowspan="2">Tokyo Store</th>
      <td>$1,200</td>
      <td>$1,350</td>
    </tr>
    <tr>
      <!-- Since the th with rowspan="2" covers this row, only 2 td are written -->
      <td>$980</td>
      <td>$1,100</td>
    </tr>
  </tbody>
</table>

For complex merged-cell tables, it is recommended to first visualize the table structure in a spreadsheet before writing the HTML.