Table structure in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML table code?

Look at the following HTML code for a table. What will you see rendered in the browser?

HTML

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
    <tr><td>Bob</td><td>25</td></tr>
  </tbody>
</table>

A An empty table with no visible content.

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

C Only the header row with 'Name' and 'Age' is shown, no data rows appear.

D A table with two columns labeled 'Name' and 'Age' and two rows: 'Alice 30' and 'Bob 25'.

💡 Hint

Remember that defines the header row and contains the data rows.

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

What error does this HTML table code cause?

Examine this HTML snippet. What problem will it cause when rendered?

HTML

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

A No error; the table renders correctly with header and body rows.

B The table will not render because <tr> must be inside <thead> or <tbody>.

C The browser ignores the first <tr> because it is outside <thead> or <tbody>.

D The browser shows a warning but still renders the table with duplicated headers.

💡 Hint

Check where the

with headers is placed relative to and .

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

Which CSS selector styles only the header cells in this table?

Given a table with

and , which CSS selector targets only the header cells ( element. So the selector 'table thead th' targets only those header cells. 'tbody th' won't match because there are no

) inside the header section? HTML <table> <thead> <tr><th>Name</th><th>Age</th></tr> </thead> <tbody> <tr><td>Alice</td><td>30</td></tr> </tbody> </table> A table thead th B table tr th C table tbody th D table td 💡 Hint Think about where the header cells are located in the HTML structure. The header cells are inside the
in tbody. 'tr th' matches all header cells but also those outside thead if any. 'td' targets data cells, not headers. ❓ layout advanced How to make table columns evenly spaced using CSS Grid? You want a table with three columns that are all the same width. Which CSS style achieves this using CSS Grid on the table element? HTML <table> <thead> <tr><th>One</th><th>Two</th><th>Three</th></tr> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody> </table> A table { display: block; grid-template-columns: auto auto auto; } B table { display: grid; grid-template-columns: repeat(3, 1fr); } thead, tbody { display: contents; } C table { width: 100%; column-count: 3; } D table { display: flex; justify-content: space-between; } 💡 Hint CSS Grid uses grid-template-columns to define column widths. 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 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? HTML <table> <thead> <tr><th id="h1">Name</th><th id="h2">Age</th></tr> </thead> <tbody> <tr><td headers="h1">Alice</td><td headers="h2">30</td></tr> </tbody> </table> A role B scope C headers D aria-labelledby 💡 Hint This attribute on	points to the id of the related	. The 'headers' attribute on	elements lists the ids of the	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.