While the HTML list provides you with an ordered manner of listing content, HTML tables give you a powerful means of presenting structured data. It may be that you are representing a list of products, comparison charts, or financial data, to name a few.
Tables can help you elegantly organize your information in rows and columns. In this post, we will be learning how to create and structure tables using the basic HTML tags—<table>, <tr>, <td>, and <th>—and best practices for accessibility and effective use of tables in web development.
This post will expand on the concepts learned in our blog on lists in HTML, as lists and tables are two of the most important methods for organizing content.
However, while lists are used for unordered or ordered items, tables are the best choice when you want to show data in a grid-like format, where every cell of the table can contain specific, related information.
Structuring Tables in HTML
Let’s begin to take a look at the basic structure of an HTML table. A table is simply a grid of rows and columns, with all rows containing multiple cells that hold data or headers.
Basic Syntax of a Table
Important HTML Tags of Table
- <table> This tag defines the overall table.
- <tr> This tag is used to define each table row.
- <th> This tag defines table headers. These cells are bold and center-aligned by default, making them ideal for titles or headings.
- <td> This tag defines normal table data cells.
In the example above,
<thead> has been used for grouping the content of the headers. It is not strictly necessary but helps in organizing content and can also be useful when working with JavaScript or CSS.
When and Why to Use Tables for Data
Unlike lists, which are ideal for displaying unordered or ordered content, tables should only be used when you need to represent tabular data. This means you should use tables when
- You want to show data in a tabular structure, like a pricing table, product comparison, or a spreadsheet.
- You have a set of data that can be categorized under different categories of entities, like showing student grades, employee performance, or an inventory list.
- You can maintain data in a structured manner using a table as it clearly distinguishes each piece of information with rows and columns.
Why Not Use Tables for Layout?
Historically, tables have been used extensively for layout. This is generally now considered bad practice. Layout should be created using CSS (Cascading Style Sheets), which offers much greater flexibility and control over the positioning of elements.
The use of tables for layout can lead to Inaccessible pages, Screen readers and other assistive technologies might find it difficult to interpret a page layout that is based on a table structure.
- Rigidity: Tables are inflexible, and thus, responsive design is a tough task. Since web designs need to be flexible across different screen sizes, CSS-based layouts (using flexbox or grid) are much better.
- Messy code: If tables are used for layout, the HTML code becomes messy and difficult to maintain.
Hence, tables should only be used for presenting data, not for structuring the visual layout of a webpage.
Best Practices for Table Accessibility
When creating a table, accessibility should be under consideration, as all users need to be able to access and understand your data.
Follow the guidelines below for enhancing the accessibility of your tables:
Use <th> for Headers
Column and row headers should always use header cells <th>. In addition to aiding screen reader users, who might have an announcing feature when reading data, cells like these are able to further describe context to the reader.
Use scope Attribute for Headers
To provide more accessibility, use the scope attribute to specify whether a header is for a row, column, or group of columns.
- <th scope=”col”>Name</th> <!– Header for a column –>
- <th scope=”row”>John Doe</th> <!– Header for a row –>
This also helps screen readers know how the data is structured in the table, thus simplifying it for users to read.
Adding Table Captions
The <caption> tag is a title to your table. It will help the user to better understand the data and the purpose of a table. This is very helpful for screen readers as they would be announcing the purpose of the table.
Avoid Nested Tables
Nested tables are tough to read, especially for screen readers. They should be used sparingly and only when necessary. Otherwise, use simpler structures.
Styling Tables with CSS
Although the basic HTML structure is enough to functionally organize data, CSS can help transform the appearance of your table, thus making it easier to read and more visually pleasing.
Example: Styling a Table
This codes
- Eliminates the space of table cells and applies border-collapse.
- Apply padding for reading.
- Used zebra striping (nth-child) where it makes two different colors row to row alternating which gives much better visual differences.
- Added hover that makes it look interactive.
Summary: When to Use Tables and Best Practices
A very basic tool to present structured data in rows and columns is a table. Best used for layouts where comparisons or pricing need to be shown along with tabular data and things need to look organized.
Try to ensure tables are accessible via headers, use the scope attribute, and apply captions.
- Never lay out a webpage using tables – this is terribly outdated and flexible.
- Use CSS to make tables more readable and style them.
- Keep accessibility in mind when marking headers and adding necessary attributes for screen readers.
- Tables are a powerful tool for web developers to organize complex data and present it in a clean, readable format when used correctly.