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.


  1. 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!
  2. Do this Tables Assessment from MDN. It’s good to put your newly learned skills to practice!

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

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.

Support us!

The Odin Project is funded by the community. Join us in empowering learners around the globe by supporting The Odin Project!