HTML Tables

Did you know you can create table structures, using HTML tags? This lesson discusses how to do this.

A table in HTML consists of table cells inside rows and columns. A table in HTML can contain other tables. It can also contain other types of elements such as text, images, links, lists, etc.

Watch Video

Summary

  • use the <table> </table> tags to create your table structure.
  • Use the <tr> </tr> tags to add rows to your tables.
  • Use the <th> </th> tags to add table header.
  • Use the <td> </td> tags to add table data (content) or cell

Let's see an example

See the Pen HTML Tables by Ola (@OlaperiKB) on CodePen.

The table shown in example has three rows, which is why there are 4 pairs of <tr> ... </tr> tags in total. Each of the rows has three columns or data cells. The first row is the table header, therefore the <td> ..</td> tags were used. On the other hand, the last three rows are regular data cells, therefore the <td> ... </td> tags were used.

Activity

Create the table shown in the image below. Extra: You can also style your table by adding text colours, background colours and other styles possible.

Further Reading

Although we have covered the basics of a table, there are additional attributes and tags that can be used to create more complex tables.