BA list of names and ages without any table structure or borders.
COnly the header row with 'Name' and 'Age' is shown, no data rows appear.
DA table with two columns labeled 'Name' and 'Age' and two rows: 'Alice 30' and 'Bob 25'.
Attempts:
2 left
💡 Hint
Remember that defines the header row and contains the data rows.
✗ Incorrect
The
element contains a header row inside with two columns: 'Name' and 'Age'. The has two rows with data cells. The browser renders this as a table with headers and two rows of data.
📝 Syntax
intermediate
2:00remaining
What error does this HTML table code cause?
Examine this HTML snippet. What problem will it cause when rendered?
ANo error; the table renders correctly with header and body rows.
BThe table will not render because <tr> must be inside <thead> or <tbody>.
CThe browser ignores the first <tr> because it is outside <thead> or <tbody>.
DThe browser shows a warning but still renders the table with duplicated headers.
Attempts:
2 left
💡 Hint
Check where the
with headers is placed relative to and
.
✗ Incorrect
No error; the table renders correctly with header and body rows. Although <tr> should be inside <thead>, <tbody>, or <tfoot>, browsers recover by inserting an implicit <tbody> before the explicit one, placing the first <tr> there. The first row appears header-like due to <th> elements.
❓ selector
advanced
2:00remaining
Which CSS selector styles only the header cells in this table?
Given a table with and , which CSS selector targets only the header cells (
CSS Grid uses grid-template-columns to define column widths.
✗ Incorrect
Setting the table to display: grid and using grid-template-columns: repeat(3, 1fr) with thead, tbody { display: contents; } makes the <tr> elements direct grid items, creating three equal columns. Flexbox doesn't create columns in tables properly. column-count is for multi-column text layout, not tables. display: block removes table layout and grid-template-columns won't work without display: grid.
❓ accessibility
expert
2:00remaining
Which attribute improves accessibility by linking table headers to data cells?
To help screen readers understand which headers relate to which data cells in a complex table, which attribute should you use on
elements that act as headers for that cell. This helps screen readers associate data cells with their headers in complex tables. 'aria-labelledby' is used for labeling elements but not typically for table cell-header linking. 'scope' is used on
to define header scope. 'role' defines ARIA roles but does not link headers to cells.
Practice
(1/5)
1. Which HTML tag is used to create a row inside a table?
easy
A. <tr>
B. <td>
C. <th>
D. <table>
Solution
Step 1: Understand table row structure
The <tr> tag defines a row in an HTML table.
Step 2: Differentiate row from cells
<td> and <th> define cells, not rows.
Final Answer:
<tr> -> Option A
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
Step 1: Identify header section tag
The <thead> tag defines the header section of a table.
Step 2: Differentiate from body and footer
<tbody> is for body rows, <tfoot> for footer, and <th> is a cell tag.
Final Answer:
<thead> -> Option A
Quick Check:
Header section = <thead> [OK]
Hint: Table header section starts with <thead> [OK]
The second row cells <td>Book</td><td>$10</td> are not wrapped inside a <tr> tag, which is required.
Step 2: Validate table syntax
Each row must be inside <tr>. Missing it causes invalid structure.
Final Answer:
Missing <tr> tags around second row cells -> Option C
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
Step 1: Confirm caption placement
The <caption> tag must be directly inside <table>, before <thead>.
Step 2: Check header, body, and footer tags
<thead> contains header row with <th>, <tbody> has two data rows, and <tfoot> has footer row.
Step 3: Validate cell tags in header
Header cells use <th>, not <td>.
Final Answer:
Correct structure: caption first, thead with th, tbody with two rows, tfoot -> Option D
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
Recommended
Ready to prove it?
Pass the test and this pattern moves unknownstrongwhile earning +1 Grip toward your certificate.
