Introduction
HTML Tables allow you to create two-dimensional tables made of rows and columns. In this lesson, you will learn everything you need to know about HTML Tables.
Lesson overview
This section contains a general overview of topics that you will learn in this lesson.
- Create advanced HTML tables.
HTML tables
Some data just really needs to be displayed in a table. HTML tables might be less commonly used than buttons, links, lists and everything else you’ve learned so far, but there are some cases where they’re the perfect tool. Some of the more advanced features can get a little tricky to set up correctly but getting started with tables is pretty easy. You create a table with <table></table> tags and then put the elements for rows, columns, headers, or anything else that’s possible inside those table elements.
For example:
See the Pen HTML Tables Example by TheOdinProject (@TheOdinProjectExamples) on CodePen.
In this codepen example we created a table element, containing two table row elements. The first row has two headings while the second row has 2 data cells.
Assignment
- Read these Tables Basics and Tables Advanced tutorials from MDN. They should teach you all the syntax behind HTML tables. It’s pretty straightforward. Make sure to code along!
- Read through CSS Tricks’ full guide to the table element, which goes very in-depth about what you have already learned and touches on a few extra things.
- Do this Tables Assessment from MDN. It’s good to put your newly learned skills to practice!
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Pencil & Paper published a great article about things you can achieve with tables if you dare to spend some time giving them some love. They suggest some good habits on how you should format your data which makes a huge difference. These are not a list of must dos to a table, but ideas worth keeping in mind for the next time a table is bothering you with how it looks.