Table rows and columns in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a table row.

HTML

<table>
  <tr>[1]</tr>
</table>

Drag options to blanks, or click blank then click option'

A<td>Cell</td>

B<p>Cell</p>

C<div>Cell</div>

D<th>Header</th>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <div> or <p> inside table rows instead of <td>.

The <td> tag defines a cell in a table row. It is the correct element to use inside a <tr> for table data.

2fill in blank

medium

Complete the code to add a header cell in a table row.

HTML

<table>
  <tr>[1]</tr>
</table>

Drag options to blanks, or click blank then click option'

A<th>Header</th>

B<caption>Header</caption>

C<td>Header</td>

D<header>Header</header>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <td> for header cells instead of <th>.

The <th> tag defines a header cell in a table. It is used inside a <tr> to mark header cells.

3fill in blank

hard

Fix the error in the table code by completing the blank.

HTML

<table>
  [1]
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

A<td>

B<tr>

C<th>

D<tbody>

Attempts:

3 left

💡 Hint

Common Mistakes

Starting a row with <td> or <th> instead of <tr>.

The <tr> tag is required to start a table row. Without it, the cells are not inside a row, causing an error.

4fill in blank

hard

Fill both blanks to create a table with a header row and a data row.

HTML

<table>
  <tr>[1][2]</tr>
  <tr><td>Data 1</td><td>Data 2</td></tr>
</table>

Drag options to blanks, or click blank then click option'

A<th>Header 1</th>

B<td>Header 1</td>

C<th>Header 2</th>

D<td>Header 2</td>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <td> tags for headers.

Mixing header and data cell tags in the header row.

Table headers use <th> tags inside a row. Both blanks need header cells to form the header row.

5fill in blank

hard

Fill all three blanks to create a table with a caption, header row, and one data row.

HTML

<table>
  [1]
  <tr>[2][3]</tr>
  <tr><td>Row 1</td><td>Row 2</td></tr>
</table>

Drag options to blanks, or click blank then click option'

A<caption>My Table</caption>

B<th>Column 1</th>

C<th>Column 2</th>

D<td>Column 1</td>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <td> instead of <th> for headers.

Forgetting the caption tag for the table title.

The <caption> tag adds a title to the table. The header row uses <th> tags for each column header.