Explain the structure of a table in HTML?

Structure of a Table in HTML

In HTML, tables are used to display data in a structured grid of rows and columns. The main elements for creating a table are <table>, <tr>, <th>, and <td>.

Key Table Elements

1
<table>: Defines the table container.
2
<tr> (Table Row): Defines a row in the table.
3
<th> (Table Header): Defines a header cell, usually bold and centered by default.
4
<td> (Table Data): Defines a standard data cell.
5
<caption>: Optional element to provide a title or description for the table.
6
<thead>, <tbody>, <tfoot>: Optional elements to group header, body, and footer rows for better semantics and styling.

Example Usage

In short: Use <table> as the container, <tr> for rows, <th> for header cells, and <td> for data cells. Optional grouping and caption elements improve semantics and accessibility.

Difficulty: 3/10

Topics: semantic HTML, accessibility, responsive design

Scenario Questions

0-2 years experience

1
We have a mock-up of a pricing page with three plans, each showing features, prices, and a signup button. How would you structure this using semantic HTML table elements so that screen readers can easily associate the features with the correct plan?
2
Imagine you've built a table, but the header row is stretching weirdly and some cells aren't aligning with their columns. What elements or attributes like colspan or rowspan would you check to debug this alignment issue?

2-5 years experience

1
We're building a financial dashboard with a dense data table. On mobile screens, the table gets cut off and looks broken. How would you refactor the HTML structure or apply CSS to make this table responsive without losing the semantic relationship of the data?
2
A developer on your team built a table using nested div elements styled with CSS Grid to look like a table. What are the accessibility and SEO implications of this approach compared to using native table tags, and how would you advise them?

5-8 years experience

1
You are designing a reusable DataTable component for a design system that needs to support sorting, filtering, and multi-level nested headers (e.g., 'Q1' nested under '2024'). How would you structure the HTML and use attributes like scope or id/headers to ensure screen readers navigate this complex hierarchy correctly?
2
We have a legacy application rendering a massive table with thousands of rows, causing noticeable layout shifts and rendering lag on load. How would you optimize the HTML structure and CSS properties (like table-layout: fixed) to improve the browser's rendering performance?

8+ years experience

1
Our enterprise platform has dozens of teams building their own custom tables, leading to inconsistent accessibility compliance and performance issues. How would you architect a standardized data-grid solution at the organization level, and what architectural boundaries would you set between native HTML tables and ARIA grid roles?
2
We are migrating a legacy, server-rendered table system to a modern client-side virtualized list. How do you balance the performance gains of virtualization (which unmounts off-screen DOM nodes) with the accessibility requirements of screen readers that expect a complete, semantic HTML table structure?

Follow-up Questions

❓How would you make this table accessible to screen reader users who need to navigate by column headers?
❓What CSS strategies would you use to prevent long text from breaking the table layout?
❓If we have to render 10,000 rows in this table, how does the browser's rendering engine handle it, and how would you optimize it?