When you're building a project that needs to represent data visually, you will need a good way to display the information so it's easy to read and understand.
Now, depending on the type of data, you can select between different representation methods using HTML elements.
In most cases, tables are more convenient to display large amounts of structured data nicely. That’s why, in this article, we are going to learn how to use tables in HTML and then how to style them.
But, first things first – what is a table in HTML?
What is a Table in HTML?
A table is nothing more than a way of representing data in rows and columns. We can also also define a table as a group of rows each containig a group of cells.
HTML tables allow web developers to arrange data into rows and columns. With tables you can arrange data like text, images, links, other tables, and more into rows and columns of cells.
You can create a table in HTML using elements. A table can be declared using using three main elements, namely:
<table>– which is the main container.
<tr>– represents the rows.
<td>– used to create data cells.
HTML Table Syntax:
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table>
|Cell 1||Cell 2||Cell 3|
|Cell 4||Cell 5||Cell 6|
Now that we've learned the basic HTML table structure, it's about time we create a more useful table with advanced features – like other elements we can use within the
How to Add a Table Heading in HTML
You can add a table heading using the
<th> tag. This tag will replace the
<td> tag which is used to represent actual data cells.
Normally you would make your top row the table heading as shown below. But you can also use the
<th> element in any row. Headings, which are defined in the
<th> tag, are centered and bold by default.
<table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>TechMania</td> <td>Maria</td> <td>Germany</td> </tr> <tr> <td>Centro comercial</td> <td>Francisco</td> <td>Mexico</td> </tr> </table>
In the above example, we can see the role that the
<th> tag plays – it provides information for the rest of the cells in the columns it belongs to.
How to Use the Scope Attribute in HTML
The scope attribute defines a way to associate header cells and data cells in a table.
The scope attribute identifies whether a cell is a header for a column or a header for a row.
This attribute can only be declared in a header cell and takes the values "col", "row", "colgroup" and "rowgroup". The values "col" and "row" indicate that the header cell is providing header information for the rest of the cells in the column or row (respectively) where it's located.
Scope Attribute Syntax
Example in code
<table> <tr> <th scope="row">Day</th> <th>Today</th> <th>Tomorrow</th> <th>Thursday</th> </tr> <tr> <th>Condition</th> <td>Sunny</td> <td>Mostly sunny</td> <td>Partly cloudy</td> </tr> <tr> <th>Temperature</th> <td>19°C</td> <td>17°C</td> <td>12°C</td> </tr> </table>
|Condition||Sunny||Mostly sunny||Partly cloudy|
How to Add a Caption to a Table
This is another attribute that makes the table more readable. The main use of a caption is to provide a description about the data presented in a table.
To insert the caption use the
<caption> element right after the table's opening tag.
<table> <caption></caption> <tr> </tr> </table>
Example in Code
<table> <caption>Fuel consumption of cars during the drive tests</caption> <tr> <th scope="col">Car</th> <th>January</th> <th>February</th> <th>March</th> </tr> <tr> <th>G-Wagon</th> <td>30 gal</td> <td>82 gal</td> <td>70 gal</td> </tr> </table>
|G-Wagon||30 gal||82 gal||70 gal|
How to Use Cell Spanning in an HTML Table
You might have seen cells that stretch across two or more columns or rows in a table. This is called cell spanning.
You can create cells that span rows and columns using two attributes,
<tr>. You need two other cell attributes to make this work,
colspan for horizontal and
rowspan for vertical spanning.
Youc an assign these attributes an interger value of a number grater than zero, representing the number of cells you wish it to span.
Example in code:
<table> <tr> <th></th> <th>Day 1</th> <th>Day 2</th> <th>Day 3</th> <th>Day 4</th> </tr> <tr> <th>Mike (injured)</th> <td colspan="3">0 km</td> <td>4 km</td> </tr> <tr> <th>Susan</th> <td>23 km</td> <td>18 km</td> <td>19 km</td> <td>15 km</td> </tr> </table>
|Day 1||Day 2||Day 3||Day 4|
|Mike (injured)||0 km||4 km|
|Susan||23 km||18 km||19 km||15 km|
Notice that in the example above, we have a cell spanning 3 cells as indicated by
colspan. The same thing happens in the case of
rowspan but in this case it will be vertical spanning.
Example of code:
<table> <tr> <th></th> <th>Basic</th> <th>Full</th> </tr> <tr> <th>Setup</th> <td rowspan="2">Free!</td> <td>$49.99</td> </tr> <tr> <th>First year</th> <td>$19.99</td> </tr> <tr> <th>Second year</th> <td>$9.99</td> <td>$29.99</td> </tr> </table>
rowspan, make sure you declare them correctly to avoid overlapping cells.
How to Add a Table Header, Body, & Footer in HTML Tables
Just like websites that have three main sections, so too does a table. We can divide our tables into three main parts: the header, body, and footer.
<thead>– used to create a separate header for a table.
<tbody>– indicates the main body of the table.
<tfoot>– creates a separate footer for the table.
To better understand how this works, let's see an example using data from two groups. The table has a heading with rows, a footer with a summary of the data, and a block of rows containg the body of the table:
<table> <thead> <tr> <th></th> <th colspan="2">Anthony</th> <th colspan="2">Lione</th> </tr> <tr> <th scope="col">Date</th> <th>Income</th> <th>Outcome</th> <th>Income</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <th>07/15</th> <td>$200,00</td> <td>$50,00</td> <td>$0</td> <td>$0</td> </tr> <tr> <th>07/28</th> <td>$0,00</td> <td>$100,00</td> <td>$100,00</td> <td>$0,00</td> </tr> </tbody> <tfoot> <tr> <th>Balance</th> <td colspan="2">$20,00</td> <td colspan="2">$10,00</td> </tr> </tfoot> </table>
A table can have more than one body. In such a scenario, each body groups the rows that are related together.
How to Style HTML Tables with CSS
Most tables you see use different colors and methods of styling to distinguish their features and important values. After all, who would want to look at data divided by just a single line...?
To add styling to a table, you will need to have a .css file created which you will link to in your main HTML file.
In the code above we’ve created a simple table using some of the structural elements that we have covered in the article.
We have also gone ahead and added some styling to make our table more attractive. The table also has a fixed header so you can scroll through the large amount of data and still see the header of a particular column.
When to Use a Table in HTML
There are many times you might want to use a table in your HTML.
You can use tables when you want to compare and contrast data with shared chacteristics
You can also use one if you want to give an overview of numerical data.
And a table can help readers quickly find specific information laid out in a clear way.
Tables are agreat way to represent tabular data, and you can create them using basic HTML elements like
And you can also add some styling to make them look good and present the data clearly.
To finish up, let's create a table using the main topics that we have covered in this article: