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.
By the end of this lesson, you should be able to do the following:
- Create advanced 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.
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.
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.
- 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.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.