Span columns

2 snippets in HTML & CSS

HCHTML & CSS

Colspan & Rowspan

syntax

<td colspan="n">Spans n columns</td>
<td rowspan="n">Spans n rows</td>

example

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Contact Info</th>
    </tr>
    <tr>
      <th></th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Acme Corp</td>
      <td>sales@acme.com</td>
      <td>555-0100</td>
    </tr>
    <tr>
      <td>support@acme.com</td>
      <td>555-0101</td>
    </tr>
  </tbody>
</table>

Note When a cell spans multiple columns or rows, omit the corresponding td elements from those positions. Miscounting causes misaligned tables.

Grid Placement & Spanning

HC · CSS Grid

syntax

grid-column: start / end;
grid-row: start / end;
grid-column: span n;

example

.feature-card {
  grid-column: 1 / 3; /* spans columns 1 and 2 */
}

.tall-card {
  grid-row: span 2; /* spans 2 rows */
}

.full-width {
  grid-column: 1 / -1; /* spans all columns */
}

Note Grid lines are numbered starting at 1. Negative numbers count from the end (-1 is the last line). span n is a shorthand that avoids hardcoding line numbers.