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.

Practice

1. Which HTML tag is used to create a row in a table?

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table structure

   A table is made of rows and columns. Rows group cells horizontally.

2. Step 2: Identify the row tag

   The <tr> tag defines a table row, while <td> and <th> define cells inside rows.

3. Final Answer:

   <tr> -> Option A

4. Quick Check:

   Row tag = <tr> [OK]

Hint: Rows use <tr>, cells use <td> or <th> [OK]

Common Mistakes:

• Confusing <td> as row tag
• Using <th> for rows instead of headers
• Using <table> as row tag

2. Which of the following is the correct way to create a table header cell?

easy

A. <table>Header</table>

B. <td>Header</td>

C. <tr>Header</tr>

D. <th>Header</th>

Solution

1. Step 1: Know header cell tags

   Table headers use <th> tags to label columns or rows.

2. Step 2: Check the options

   Only <th>Header</th> uses <th> correctly for a header cell.

3. Final Answer:

   <th>Header</th> -> Option D

4. Quick Check:

   Headers use <th> tags [OK]

Hint: Headers always use <th>, not <td> [OK]

Common Mistakes:

• Using <td> for headers
• Using <tr> or <table> as cells
• Missing closing tags

3. What will the following HTML code display in a browser?

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

medium

A. An error because <th> cannot be used inside <tr>.

B. A list of names and ages without any table structure.

C. A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'.

D. A table with one column and two rows.

Solution

1. Step 1: Analyze the table structure

   The first row uses <th> for headers 'Name' and 'Age'. The second row uses <td> for data 'Alice' and '30'.

2. Step 2: Understand rendering

   This creates a table with two columns labeled 'Name' and 'Age', and one data row with 'Alice' and '30'.

3. Final Answer:

   A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'. -> Option C

4. Quick Check:

   Headers + data rows = labeled table [OK]

Hint: Headers in first row, data in next rows form columns [OK]

Common Mistakes:

• Thinking <th> cannot be inside <tr>
• Confusing table with list
• Assuming one column only

4. Identify the error in this table code:

<table>
  <tr>
    <td>Item 1</td>
  <tr>
    <td>Item 2</td>
  </tr>
</table>

medium

A. Table tag is not closed.

B. Missing closing tag for the first <tr>.

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

D. Extra closing tag at the end.

Solution

1. Step 1: Check row tags

   The first <tr> is opened but not closed before the second <tr> starts.

2. Step 2: Confirm correct nesting

   Each <tr> must have a matching closing </tr>. Here, the first row is missing its closing tag.

3. Final Answer:

   Missing closing tag for the first <tr>. -> Option B

4. Quick Check:

   Every needs a closing [OK]

Hint: Check every has a matching [OK]

Common Mistakes:

• Ignoring missing closing tags
• Confusing <td> and <th> errors
• Assuming table tag is unclosed

5. You want to create a table with 3 columns: 'Product', 'Price', and 'Stock'. The first row should be headers. Which code snippet correctly creates this table structure?

hard

A. <table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</table>

B. <table>
<tr>
<td>Product</td>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

C. <table>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</table>

D. <table>
<tr>
<th>Product</th>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

Solution

1. Step 1: Identify header row requirements

   The first row should use <th> tags for all three headers to label columns.

2. Step 2: Check each option

   <table>
     <tr>
       <th>Product</th>
       <th>Price</th>
       <th>Stock</th>
     </tr>
   </table>

   correctly uses <th> inside a <tr> for all headers.

   <table>
     <tr>
       <td>Product</td>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   uses <td> which is for data cells, not headers.

   <table>
     <th>Product</th>
     <th>Price</th>
     <th>Stock</th>
   </table>

   places <th> directly inside <table> without a row.

   <table>
     <tr>
       <th>Product</th>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   mixes <th> and <td> in the header row, which is incorrect.

3. Final Answer:

   <pre><table> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> </table></pre> -> Option A

4. Quick Check:

   Headers = all <th> in a <tr> [OK]

Hint: Headers row uses all <th> inside one <tr> [OK]

Common Mistakes:

• Using <td> for headers
• Placing <th> outside <tr>
• Mixing <th> and <td> in header row