How to create HTML tables

You can use the <table> tag in HTML to structure in­for­ma­tion in a clear, tabular format. You can place a table anywhere on a web page, and by spec­i­fy­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­a­rate­ly using CSS in­struc­tions.

HTML tables organize in­for­ma­tion into rows (hor­i­zon­tal) and columns (vertical) and can be used as an al­ter­na­tive to lists to present the following types of content:

• Calendar
• Rankings
• Timeta­bles
• Price lists
• Product com­par­isons
• Sta­tis­tics

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 au­to­mat­i­cal­ly 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­tial­ly a spe­cial­ized version of the <td> tag. It is typically used to highlight header cells (“table heading”) but can also be used to emphasize the first entry in a row.

Simple HTML table example

To il­lus­trate the ca­pa­bil­i­ties 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­for­ma­tion that cor­re­sponds to the cat­e­gories 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­abil­i­ty: 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­solute­ly ir­rel­e­vant for un­der­stand­ing the in­for­ma­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­spon­sive 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­sis­tent units: When including numerical values in a table, it’s common to ac­ci­den­tal­ly use incorrect units or forget to add an entry. Make sure to maintain con­sis­ten­cy here to avoid confusion.

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