colspan / rowspan

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

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

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.