0
0
HTMLmarkup~20 mins

Table headers in HTML - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Table Header Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
What is the purpose of the element in an HTML table?
Choose the best description of the element's role in a table.
AIt styles the table rows with alternating colors.
BIt defines the footer section of a table.
CIt creates a separate table inside the main table.
DIt groups the header content in a table, usually containing <th> elements.
Attempts:
2 left
💡 Hint
Think about which part of the table usually contains column titles.
📝 Syntax
intermediate
1:30remaining
Which HTML snippet correctly defines a table header cell?
Select the option that uses the correct tag for a table header cell.
A<th>Header</th>
B<header>Header</header>
C<td>Header</td>
D<head>Header</head>
Attempts:
2 left
💡 Hint
Table header cells use a special tag different from normal cells.
❓ rendering
advanced
2:00remaining
What will the browser display for this table snippet?
Given the HTML below, what is the visual output 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>
AA table with two columns labeled 'Name' and 'Age' in bold at the top, and two rows with Alice/30 and Bob/25 below.
BA table with no headers, just two rows showing Alice/30 and Bob/25.
CA table with 'Name' and 'Age' as normal cells, not bold or centered.
DAn error message because <thead> is not allowed inside <table>.
Attempts:
2 left
💡 Hint
Headers inside usually appear bold and centered.
❓ selector
advanced
1:30remaining
Which CSS selector targets only table header cells inside the table header section?
Choose the CSS selector that styles only elements inside .
Atable tbody th
Btable thead th
Ctable th
Dthead td
Attempts:
2 left
💡 Hint
Think about selecting inside the specifically.
❓ accessibility
expert
2:00remaining
Which attribute improves accessibility by associating a table header with its data cells?
Select the attribute that links a header cell to its related cells for screen readers.
Aalt
Baria-label
Cscope
Dtitle
Attempts:
2 left
💡 Hint
This attribute defines if the header is for a row, column, or group.