How to create HTML tables

You can use the <table> tag in HTML to structure in­form­a­tion in a clear, tabular format. You can place a table anywhere on a web page, and by spe­cify­ing header cells, rows and data cells, you can also determine how tables are struc­tured.

What is an HTML table and what is it used for?

An HTML table is a struc­tured HTML element that is used to display data and text in a tabular format. Several HTML tags are used to define and structure tables. The visual styling of HTML tables, is done sep­ar­ately using CSS in­struc­tions.

HTML tables organise in­form­a­tion into rows (ho­ri­zont­al) and columns (vertical) and can be used as an al­tern­at­ive to lists to present the following types of content:

• Calendar
• Rankings
• Timetables
• Price lists
• Product com­par­is­ons
• Stat­ist­ics

Which tags are needed for an HTML table?

Below is an overview of the tags that are used to create an HTML table. While the first three tags are a must, the fourth tag (<th>) is optional and can be used to create HTML table headers:

• <table>: The HTML <table> tag is the key element for creating a table. An opening <table> marks the start of the HTML table, while a closing </table> indicates its end.
• <tr>: To create a new row, the <tr> tag is used. This tag stands for ‘table row’. Each row must have an opening and closing tag.
• <td>: The <td> tag stands for ‘table data’, and is for the actual content of the table. Each time a <td> element is created, a table cell in auto­mat­ic­ally generated and, in turn, a new column. The data for the cell is placed between the opening <td> and closing </td> tag.
• <th>: The <th> tag is es­sen­tially a spe­cial­ised version of the <td> tag. It is typically used to highlight header cells (‘table heading’) but can also be used to emphasise the first entry in a row.

Simple HTML table example

To il­lus­trate the cap­ab­il­it­ies of table tags, we’ll create a simple HTML table below. In the following example, we’ll include the de­scrip­tions and prices for three different dishes. In the header row, we’ll define the three column headers: ‘Dish’, ‘De­scrip­tion’, and ‘Price’. This is followed by three more rows, which each contain in­form­a­tion that cor­res­ponds to the cat­egor­ies in the headers. The HTML table below consists of four rows and three columns:

<table>
	<tr>
		<th>Dish</th>
		<th>Description</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Spaghetti Bolognese</td>
		<td>Homemade pasta with meat sauce</td>
		<td>£9.50</td>
	</tr>
	<tr>
		<td>Margherita Pizza</td>
		<td>Pizza with tomato sauce, mozzarella and fresh basil</td>
		<td>£9.00</td>
	</tr>
	<tr>
		<td>Caesar Salad</td>
		<td>Salad, chicken breast, croutons, Caesar dressing</td>
		<td>£8.50</td>
	</tr>
</table>

On the website in question, the table looks something like this:

Close

Typical HTML table problems and how to fix them

When creating HTML tables, several issues can occur. Most can be avoided though with care and precision. Below we’ve outlined the most common chal­lenges:

• Read­ab­il­ity: Tables are difficult for users and screen readers to read if they don’t have a clear structure. That’s why you should only omit headers if they are ab­so­lutely ir­rel­ev­ant for un­der­stand­ing the in­form­a­tion.
• Display on mobile devices: Standard HTML tables are often poorly displayed on smart­phones and tablets. To ensure that embedded tables can be viewed on mobile devices, you should implement CSS for a re­spons­ive design.
• Tables as a layout element: In the past, HTML tables were commonly used to design websites. Today, it’s best to avoid this approach and instead use CSS to manage the layout of your website.
• Missing or in­con­sist­ent units: When including numerical values in a table, it’s common to ac­ci­dent­ally use incorrect units or forget to add an entry. Make sure to maintain con­sist­ency here to avoid confusion.

Another issue when creating HTML tables is the display of special char­ac­ters. Symbols like <, >, &, " and ' have special sig­ni­fic­ance in HTML and often lead to tables being in­cor­rectly rendered. The solution in this case is to replace the character with its cor­res­pond­ing HTML entity. Here’s an overview of HTML entities for the char­ac­ters listed above: