How do we create tables in HTML?

Creating Tables 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, Web Accessibility, Responsive Layouts

Scenario Questions

0-2 years experience

1
We need to display a simple 3-column pricing matrix. How would you structure the HTML to ensure screen readers can clearly associate each price cell with its respective plan tier and feature name?
2
Imagine you've built a standard data table, but some cells need to span across two columns while others span two rows. How would you modify the markup to achieve this without breaking the grid alignment?

2-5 years experience

1
We have a standard HTML table displaying user transactions, but on mobile devices, it overflows and breaks our responsive layout. How would you refactor this to be mobile-friendly? What are the tradeoffs of using a CSS overflow container versus transforming the table rows into card-like blocks?
2
A blind user reports that our data table is completely unreadable with their screen reader. Looking at the codebase, the previous developer built it using nested divs styled to look like a table. How would you refactor this to use semantic HTML, and what specific attributes would you add to guarantee accessibility?

5-8 years experience

1
We need to render a financial ledger with over 10,000 rows that updates in real-time via WebSockets. A native HTML table causes severe rendering lag and layout thrashing. How would you approach optimizing this? When would you choose DOM virtualization over a native table element?
2
You are designing a complex, multi-level nested data grid where rows can expand to show sub-tables. How do you manage the DOM structure, keyboard navigation, and ARIA states to ensure this remains accessible and performant?

8+ years experience

1
Our enterprise design system needs a standardized 'Data Grid' component used by dozens of product teams. Some teams need basic static tables, while others require column reordering, sorting, and infinite scroll. How would you architect this component to balance developer experience, performance, and strict WCAG compliance?
2
We are migrating a legacy application with hundreds of ad-hoc, deeply nested HTML tables used for page layouts to a modern, accessible design system. How would you define the migration strategy, automated linting rules, and training to enforce semantic table structures across the engineering organization?

Follow-up Questions

❓How does the browser calculate table column widths by default, and how does 'table-layout: fixed' change this behavior?
❓What is the difference between using CSS 'display: table' versus using semantic HTML table elements for accessibility?
❓How do screen readers announce table headers when navigating cells, and how does the 'scope' attribute assist them?