X

HTML Tables Summary

Tables are a common way to present information, or ‘tabular data,’ so it’s easy to compare. Tables are arranged into rows and columns, like a spreadsheet.

HTML tables are challenging for beginners and not essential knowledge when first learning web development.

<table>
	<thead>
		<tr>
			<td>Colors</td>
			<td>Shapes</td>
			<td>Textures</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Blue</td>
			<td>Square</td>
			<td>Smooth</td>
		</tr>
		<tr>
			<td>Green</td>
			<td>Triangle</td>
			<td>Rough</td>
		</tr>
	</tbody>
</table>

Head & Body

Tables don’t require a head, but it’s best practice to use them. The table head <thead> is where the names of columns will be displayed. Using the head you can style these column titles differently than the rest of the table data.

The table body <tbody> is where you display the rest of the table data. You would generally want all this data styled the same. 

<table>
	<thead></thead>
	<tbody></tbody>
</table>

Rows & Data

Table rows <tr> run horizontally, left to right, and contain all of your information placed into table data tags <td>. Every row of table data must be wrapped in a <tr> tag. And all table data, or information, in each row must be wrapped in a <td> tag.

<tr>
	<td></td>
	<td></td>
	<td></td>
</tr>

Table Visibility

It is important to consider whether a table on a web page will be fully visible to all visitors. For example, will the full table be viewable on a mobile phone with a narrow screen?

There are a number of solutions for ensuring that tables will be viewable on all screens. The most common is to make the table scrollable using CSS, specifically overflow:auto;

Without a solution, tables may be larger than your content wrapper and could break your layout.

Code Sandbox