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.
Learning Outcomes
By the end of this lesson, you should be able to do the following:
- 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!
- 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 is pretty simple and 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.
