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:
<table>
<tr>
<td>
data 1
</td>
<td>
data 2
</td>
</tr>
<tr>
<td>
data 3
</td>
<td>
data 4
</td>
</tr>
</table>
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:
<th>Name</th>
<th>Number</th>
<th>Email</th>
<th>Address</th>
This would appear as such:
Name | Number | 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.
HTML | **CSS* |
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.