Detailed explanation
Build an HTML table with a <table> element containing three logical sections: <thead> for heading rows, <tbody> for the main data rows, and <tfoot> for summary or total rows. Inside each section, use <tr> to define a row. Within each row, use <th> for header cells and <td> for data cells. These elements describe relationships in tabular data, so tables are appropriate for price lists, reports, and schedules, rather than general page layout.
For example: <table><caption>Purchase summary</caption><thead><tr><th scope="col">Item</th><th scope="col">Price</th></tr></thead><tbody><tr><td>Book</td><td>$10</td></tr></tbody><tfoot><tr><th scope="row">Total</th><td>$10</td></tr></tfoot></table>. Here, <caption> provides a title for the whole table, the header identifies the two columns, the body contains the purchase, and the footer presents its total. Using <th scope="row"> for Total makes it a row header rather than an ordinary data cell. The value in the footer is written explicitly; HTML does not calculate totals automatically.
Under the hood, the browser lays out the cells as a shared grid, aligning columns across the header, body, and footer. The section elements create row groups, which also provide useful targets for CSS, such as thead { background: #eee; } or tfoot { font-weight: bold; }. Browsers typically render <th> text bold and centred, but CSS can change this appearance without changing its meaning. For a simple visible grid, apply border-collapse: collapse to the table and border and padding rules to th and td.
Interviewers usually look for correct nesting, clear distinctions between header and data cells, and basic accessibility awareness. In a simple table, scope="col" and scope="row" explicitly indicate which cells a header describes, helping assistive technologies interpret the data. Keep the sections in header–body–footer order and maintain a consistent logical column count, accounting for any spans. Write <tbody> explicitly even though browsers can insert it when parsing table rows directly inside a table.
Key points to remember
- Use <thead>, <tbody>, and <tfoot> to group heading, data, and summary rows.
- Nest <th> and <td> cells inside <tr> rows, not directly inside table sections.
- Use <th> for column or row headers and <td> for ordinary data.
- Add a descriptive <caption> and appropriate scope attributes for accessibility.
- Use CSS for borders, spacing, alignment, and section styling.
Common mistakes candidates make
- Using bold <td> cells instead of semantic <th> elements for headers.
- Placing cells directly inside <thead>, <tbody>, or <tfoot> without a <tr>.
- Expecting <tfoot> to calculate totals or stay fixed at the bottom of the viewport.
Likely follow-up questions
Are all three table sections mandatory?
No; a table does not need a header or footer if the data does not require them. When parsing HTML with rows directly inside <table>, browsers can insert a <tbody> into the DOM, so writing it explicitly makes the structure clearer.
How do you merge cells in a table?
Use colspan to make a cell span multiple columns and rowspan to span multiple rows. Ensure the spans fit the table grid without overlapping other cells; a row span cannot extend across row groups.
What is the difference between <thead> and <th>?
<thead> groups one or more heading rows, while <th> defines an individual header cell. A <th> can also appear in the body or footer, for example as a row label.
Interview tip: Explain the table–section–row–cell hierarchy, then demonstrate a small example with column headers, one data row, and a total.