Table structure in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to create a table?

The <table> tag is used to create a table in HTML.

beginner

What tags define rows and cells inside a table?

Rows are defined with <tr> tags. Inside rows, header cells use <th> and regular cells use <td>.

intermediate

What is the purpose of the <thead>, <tbody>, and <tfoot> tags?

They group parts of a table: <thead> for header rows, <tbody> for body rows, and <tfoot> for footer rows. This helps organize and style tables.

beginner

How do you make a table header cell different from a regular cell?

Use <th> for header cells. They are bold and centered by default, helping users understand the table's columns or rows.

intermediate

Why should tables use semantic tags like <th> and <caption>?

Semantic tags improve accessibility. Screen readers can better describe the table, and browsers can style it properly. <caption> gives a title to the table.

Which tag starts a new row in an HTML table?

A <tr>

B <td>

C <th>

D <table>

The <tr> tag defines a table row.

Which tag is used for a header cell in a table?

A <td>

B <th>

C <tr>

D <thead>

The <th> tag creates a header cell, which is bold and centered by default.

What tag groups the main content rows of a table?

A <caption>

B <tfoot>

C <thead>

D <tbody>

<tbody> groups the body rows of a table.

Which tag provides a title or description for a table?

A <caption>

B <title>

C <header>

D <summary>

The <caption> tag adds a title or description to a table.

Why is it important to use semantic tags in tables?

A To make tables load faster

B To reduce file size

C To improve accessibility and styling

D To hide table borders

Semantic tags help screen readers and browsers understand and style tables better.

Explain the basic structure of an HTML table and the purpose of its main tags.

Think about how rows and cells are organized inside a table.

Describe why using semantic tags like and is important for tables.

Consider how people with disabilities or browsers benefit.

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