HTML Tables

Organize data into rows and columns — like a spreadsheet built right into your webpage.

Step 1 of 5

Tables: rows and columns for data

Tables were created to solve a specific problem: displaying data that has a natural grid structure — like a class schedule, sports scores, or a pricing comparison. Before tables, there was no way to align data in rows and columns on the web.

Every spreadsheet you have ever used (Google Sheets, Excel) is essentially a table. On the web, sites like ESPN use tables for standings, Amazon uses them for product comparisons, and Wikipedia is full of data tables.

A table is built from the outside in:

is the container, (table row) creates each horizontal row, and

(table data) creates each cell within a row. For header cells, use

instead of

— it bolds the text and tells screen readers "this cell labels the others."

Think of it this way: Think of a table like a bookshelf with labeled shelves. The is the entire bookshelf. Each is a shelf (a row). Each

is a book sitting on that shelf (a cell). And

cells are the labels stuck on the shelf edge telling you what category of books goes there.

Tables are for data, not layouts

Tables should only be used for tabular data — information that naturally belongs in a grid. In the early web (1990s–2000s), developers misused tables to create page layouts. This is now considered a serious anti-pattern because it breaks screen readers and makes responsive design nearly impossible. Use CSS Grid or Flexbox for layouts instead.

Learn more on MDN

HTML<table>HTML<tr> table row HTML<td> table data HTML<th> table header

HTMLREAD ONLY

TAG VIEW

Start typing to see your tags visualized here...

PREVIEW