Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind HTML Table Colspan & Rowspan?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

<th ___="2">Name</th>

3Order

Put the learning moves in the order that makes the concept easiest to apply.

HTML Table - Rowspan

HTML Table - Colspan

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

NAME

APRIL

2022
FIESTA

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example

Formatted code

  <table>
  <tr>
    <th colspan="2">Name</th>

  <th>Age</th>
  </tr>
  <tr>

  <td>Jill</td>
    <td>Smith</td>

  <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>

  <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

Live preview

Note

The value of the colspan attribute represents the number of columns to span.

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

Formatted code

  <table>
  <tr>
    <th>Name</th>

  <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>

  <td>555-1234</td>
  </tr>
  <tr>

  <td>555-8745</td>
</tr>
</table>

Live preview

Note

The value of the rowspan attribute represents the number of rows to span.