How to create tables in HTML
This article will go over how to create tables in HTML
What is a table?
A table is a spreadsheet like grid, with rows and columns, that renders complex data. For instance, a list of books, by name, author, and date. We can setup column headers that show the title, and then render each book as a row in that table.
Let's go over the common table tags and how we can use them to render a table.
- table - The main table tag
- thead - The table header tag
- tbody - The body of the table that will show each row
- tr - The tag that will define each row of data
- th - The tag that specificies the header title of each column
- td - The tag that contains the data such as book name, author, or date
Here is an example of an HTML table show books and authors:
<table border="1"> <thead> <tr> <th>Title</th> <th>Author</th> <th>Release Date</th> </tr> </thead> <tbody> <tr> <td>Book 1</td> <td>John Johnson</td> <td>01/01/2021</td> </tr> <tr> <td>Book 2</td> <td>John Johnson</td> <td>01/01/2021</td> </tr> <tr> <td>Book 3</td> <td>John Johnson</td> <td>01/01/2021</td> </tr> </tbody> </table>
|Book 1||John Johnson||01/01/2021|
|Book 2||John Johnson||01/01/2021|
|Book 3||John Johnson||01/01/2021|
Tables are very useful in creating a spreadsheet like grid of rows and columns, and showing data to the user in a clean way.