HTML Tables
Organize data into rows and columns with a table.
Syntax
<table><tr><td>cell</td></tr></table>A table arranges data into rows and columns. It is built from several elements.
Core table elements
<table>— wraps the whole table.<tr>— a table row.<td>— a table cell (data).<th>— a header cell.
Use the border attribute or CSS to make the grid visible.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer displays a pricing plan comparison using a <table> to align features across columns.
- A reporting dashboard shows monthly revenue figures in a <table> with columns per month.
- A sports results page lists match scores using a <table> with team names and scores in rows.
More examples
Simple two-column table
<table> contains rows (<tr>) which contain data cells (<td>) to form a grid of aligned information.
<table>
<tr>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<td>CSS</td>
<td>Styling</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Interactivity</td>
</tr>
</table>Table with border for visibility
The border attribute (or CSS border) makes cell boundaries visible for easier data scanning.
<table border="1">
<tr>
<td>Plan</td>
<td>Price</td>
<td>Users</td>
</tr>
<tr>
<td>Starter</td>
<td>Free</td>
<td>1</td>
</tr>
<tr>
<td>Pro</td>
<td>$19/mo</td>
<td>5</td>
</tr>
</table>Table with caption element
<caption> provides an accessible title for the table, rendered above it and announced by screen readers.
<table>
<caption>Q1 Sales by Region</caption>
<tr>
<td>North</td><td>$42,000</td>
</tr>
<tr>
<td>South</td><td>$38,500</td>
</tr>
<tr>
<td>West</td><td>$51,200</td>
</tr>
</table>
Discussion