Table structure in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a table in HTML.

HTML

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

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

A border="1"

Bstyle="border: 1px solid black;"

Cclass="my-table"

Dlang="en"

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS styles instead of the border attribute for this simple example.

Forgetting to add any attribute, so the table has no visible border.

The border="1" attribute adds a simple border to the table, making it visible.

2fill in blank

medium

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

HTML

<table border="1">
  <tr>
    [1]>Name</th>
  </tr>
</table>

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

A<head

B<th

C<header

D<td

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using tags like <header> or <head> inside the table.

The <th> tag defines a header cell in a table row.

3fill in blank

hard

Fix the error in the table row by completing the missing closing tag.

HTML

<table border="1">
  <tr>
    <td>Item 1</td>
    <td>Item 2[1]
  </tr>
</table>

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

A</table>

B</tr>

C</td>

D</th>

Attempts:

3 left

💡 Hint

Common Mistakes

Closing the row instead of the cell.

Closing the table instead of the cell.

Each table cell <td> must be properly closed with </td>.

4fill in blank

hard

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

HTML

<table border="1">
  <tr>
    <[1]>Name</[1]>
    <[1]>Age</[1]>
  </tr>
  <tr>
    <[2]>Alice</[2]>
    <[2]>30</[2]>
  </tr>
</table>

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

Ath

Btr

Ctd

Dtable

Attempts:

3 left

💡 Hint

Common Mistakes

Using td for headers.

Using th for data cells.

The first row uses <th> for headers, and the second row uses <td> for data cells.

5fill in blank

hard

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

HTML

<table border="1">
  <[1]>User Info</[1]>
  <tr>
    <[2]>Username</[2]>
    <[2]>Email</[2]>
  </tr>
  <tr>
    <[3]>john_doe</[3]>
    <[3]>[e-mail]</[3]>
  </tr>
</table>

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

Acaption

Bth

Ctd

Dthead

Attempts:

3 left

💡 Hint

Common Mistakes

Using thead instead of caption for the title.

Mixing up th and td tags.

The <caption> tag adds a title to the table. Header cells use <th>, and data cells use <td>.

Practice

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

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table row structure

   The <tr> tag defines a row in an HTML table.

2. Step 2: Differentiate row from cells

   <td> and <th> define cells, not 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 <tr> with <td>
• Using <th> for rows
• Using <table> for rows

2. Which is the correct way to start a table header section in HTML?

easy

A. <thead>

B. <tbody>

C. <tfoot>

D. <th>

Solution

1. Step 1: Identify header section tag

   The <thead> tag defines the header section of a table.

2. Step 2: Differentiate from body and footer

   <tbody> is for body rows, <tfoot> for footer, and <th> is a cell tag.

3. Final Answer:

   <thead> -> Option A

4. Quick Check:

   Header section = <thead> [OK]

Hint: Table header section starts with <thead> [OK]

Common Mistakes:

• Using <tbody> for header
• Using <th> as section tag
• Confusing <tfoot> with header

3. What will the following HTML code display?

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

medium

A. A table with one column named NameAge and one row with Alice30

B. A table with two columns: Name and Age, and one row with Alice and 30

C. An error because <th> cannot be inside <tr>

D. A table with two rows but no columns

Solution

1. Step 1: Analyze table header row

   The first <tr> has two <th> cells: 'Name' and 'Age', creating two columns.

2. Step 2: Analyze data row

   The second <tr> has two <td> cells: 'Alice' and '30', filling the columns.

3. Final Answer:

   A table with two columns: Name and Age, and one row with Alice and 30 -> Option B

4. Quick Check:

   Headers + data cells = two columns, one data row [OK]

Hint: Headers create columns; data fills rows [OK]

Common Mistakes:

• Thinking <th> can't be in <tr>
• Merging headers into one column
• Ignoring data cells

4. Find the error in this table code:

<table>
  <tr><td>Item</td><td>Price</td></tr>
  <td>Book</td><td>$10</td>
</table>

medium

A. Table must have <thead> and <tbody> tags

B. Using <td> inside <table> is invalid

C. Missing <tr> tags around second row cells

D. Price cell should use <th> instead of <td>

Solution

1. Step 1: Check row structure

   The second row cells <td>Book</td><td>$10</td> are not wrapped inside a <tr> tag, which is required.

2. Step 2: Validate table syntax

   Each row must be inside <tr>. Missing it causes invalid structure.

3. Final Answer:

   Missing <tr> tags around second row cells -> Option C

4. Quick Check:

   Rows need <tr> tags [OK]

Hint: Every row's cells must be inside <tr> [OK]

Common Mistakes:

• Omitting <tr> tags
• Thinking <td> can be direct child of <table>
• Confusing <th> and <td> usage

5. You want to create a table with a caption, a header row, a body with two rows, and a footer row. Which is the correct structure?

hard

A. <table><caption>Title</caption><thead><tr><td>H1</td></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

B. <table><thead><caption>Title</caption><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

C. <table><caption>Title</caption><tbody><tr><th>H1</th></tr><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

D. <table><caption>Title</caption><thead><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

Solution

1. Step 1: Confirm caption placement

   The <caption> tag must be directly inside <table>, before <thead>.

2. Step 2: Check header, body, and footer tags

   <thead> contains header row with <th>, <tbody> has two data rows, and <tfoot> has footer row.

3. Step 3: Validate cell tags in header

   Header cells use <th>, not <td>.

4. Final Answer:

   Correct structure: caption first, thead with th, tbody with two rows, tfoot -> Option D

5. Quick Check:

   Caption + thead + tbody + tfoot correct order [OK]

Hint: Caption first, then thead, tbody, tfoot with proper cells [OK]

Common Mistakes:

• Placing caption inside thead
• Using <td> in header
• Omitting tbody
• Wrong tag order