This tutorial explains how to create a table in HTML and populate the table rows and columns with data. Tables can be used to organise and display a range of information but should not be used for creating a web page layout – you should use divs or other tags for web page layouts.
The example table created in the video will look like the one below. We will look at how to apply styles to a table later on but in this tutorial we will focus on creating the headings and adding rows of data.
Tables can be used for a range of purposes such as displaying scores for teams on a sports website. They can also be used to display results from a database query. Make sure that when adding a table, you apply some CSS code to give it an effective theme which fits in with the rest of the webpage as the default table style is pretty plain and boring. You might even like to completely remove the border or just use a very light border or background colours on different rows or columns.
The main HTML tags used to create a table are:
- table – this actually holds the whole table. Your rows and table data should be inside the table tags.
- caption – this is optional and is used to add a caption to a table
- th – this creates a heading for a column
- tr – this creates a row in the table
- td – this adds a cell of data to a table row
The number of td tags used in a row should generally match the number of headings in the table so that you don’t have any columns out of place.
Watch the video below and then scroll down the page to see the sample code.
Here is the HTML code:
<!DOCTYPE html> <html> <head> <title>Tables</title> <link rel="stylesheet" href="resources/stylesheet18.css"/> </head> <body> <table border="1px"> <caption>Top Selling Games on Steam</caption> <tr> <th>Rank</th> <th>Title</th> <th>Developer</th> </tr> <tr> <td>1</td> <td>ARK: Survival Evolved</td> <td>Studio Wildcard</td> </tr> <tr> <td>2</td> <td>Fallout 4</td> <td>Bethesda Game Studios</td> </tr> <tr> <td>3</td> <td>Grand Theft Auto 5</td> <td>Rockstar</td> </tr> <tr> <td>4</td> <td>LEGO Worlds</td> <td>TT Games</td> </tr> <tr> <td>5</td> <td>The Witcher 3: Wild Hunt</td> <td>CD Projekt Red</td> </tr> </table> </body> </html>
There is no CSS code for this tutorial as not styling has been applied yet – this will be in the next tutorial!