Creating a table in HTML5 is very simple once you get used to it and it can provide a great way to organize a set of data. You use the <table></table> tags to create the table and can mess with formatting inside there. To put the data in you want to use the <tr></tr> tags to create rows and <td></td> tag to create cells within the rows. You can fill the cells with text, images, videos, and many other elements.

Below is a basic example of the data and code would look:

data 1
data 2
data 3
data 4

data 1 data 2
data 3 data 3

Notice that data 1 and 2 are on the same row but in different cells.

With HTML5 tables the borders of the cells are not displayed unless you define them. You can also put a title on the top of the table not in a cell by using the <caption> tag.

You can also set row headers by using the <th> tag. Say you're making a table to track customer's phone numbers, email addresses, and home addresses. You would use the following code as headers:


This would appear as such:

Name Number Email Address

You can also use the rowspan or colspan attributes in the column to make data span however many columns/rows that you desire. This can be helpful if you want to have a header over the entire table that is still included in the table. There are many reasons that these could be used, it just depends on your need.

Other attributes/CSS properties that could be used are listed below.

align width, margin, text-align
width width
height height
cellpadding padding
cellspacing border-spacing, border-collapse
bgcolor background-color
valign vertical-align
border border, border-style, border-spacing
n/a background-image
n/a caption-side

(Felke-Morris, Ed D., 2016, ch. 9)

As you can see CSS provides more usability but, is not a requirement to have a good table.