HTML tables

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Get started

Prerequisites

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will take you through all the fundamentals of creating tables in HTML.

HTML table basics: This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
HTML table advanced features and accessibility: This article looks at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

Assessments

The following assessment will test your understanding of the HTML table techniques covered in the guides above.

Structuring planet data: In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.