It is quite important to know how to use tables in HTML because they are used on many sites. HTML tables are tables in which we expose collections of data.
In a slightly more concrete way, an HTML table will allow you, for example, to create a balance sheet or a comparative table but above all should not be used to format other elements of your site which will have to be formatted with spreadsheets. CSS styling.
If you need to represent and structure data, then HTML tables are what you need and we’ll see how to use them.
Did you know ? Although HTML tables are not recommended for formatting web pages, they are the basis for creating… emails! If you want to develop and format your own emailings, you will have to learn how to master them.
Submit your project for free on Codeur.com, receive fifteen quotes and select the ideal web developer.
Find a web developer
Basic constitution of an HTML table
An HTML table is made up of 3 elements to form the table itself, the columns and the rows. These elements are:
- An element named ” tablewhich defines the array as a whole.
- One or more elements tr(for “table row” in English which means “table line”) which are the rows of the table. Add a set of tr tags
<tr></tr>for each desired row in the table.
- One or more elements td(for “table data” in English which means “table data”) which are the cells of the table. These “td” are to be placed inside the “tr” lines and each “td” added represents a cell of the line (from left to right) but also a column of the table.
In the first line “tr”, we will often tend to define the titles of the columns of the table and we generally want this data to stand out in relation to the other data.
There is a particular element to create the titles of the columns which is the element ” th », we will use this element in the rows of the table (tr) instead of the usual data elements (td) to create the titles of the HTML table. Tags
<th></th> will bring a different formatting from
<td></td> to highlight table titles which could also be done in CSS.
Another element not essential to the creation of a table can be added, it is ” caption which allows you to add a description of the table. This description is displayed by default above the HTML table but can be moved with the CSS property
caption-side which takes the value:
Here is an example of a simple HTML table:
<table> <caption style="caption-side:bottom">Tableau des participants</caption> <tr> <th>Nom</th> <th>Prénom</th> <th>Âge</th> </tr> <tr> <td>Rossi</td> <td>Laure</td> <td>43 ans</td> </tr> <tr> <td>Guyon</td> <td>Augustin</td> <td>19 ans</td> </tr> </table>
Result of the HTML table shown above:
Find the best web developer on Codeur.com
Your first quotes in 15 minutes
Free and without obligation
Already more than 75,000 customers
Find a freelancer
Build a complex HTML table
As we have seen, HTML tables allow you to create simple tables of data. However, you can also use HTML tables to create more complex tables, and that’s what you’ll learn to do in this part of the guide.
The Thead, Tbody, and Tfoot Elements of a Table
In addition to the different elements that we have previously learned to use, there are three other elements that will allow you to structure your tables and give them a more complete style.
- The element ” head » is placed at the beginning of the table just after the declaration of the table with
<table>and under the “caption” element if you added a description to your table.
It is in this element that we will add the column titles of the table with a “tr” line and “th” elements.
- The element ” body is the body of the table that contains the cells (data) of the HTML table. It is placed below the “thead”.
- The element ” tfoot » is positioned either before the « tbody » or after. In this element, we will add all the cells that will be added at the bottom of the table.
These elements are optional and only serve to structure a table.
The “colspan” and “rowspan” attributes
Sometimes in a table you will need to merge cells to create special formatting or avoid data redundancy. With the basic elements of HTML tables, it is not possible to merge cells, however there are HTML attributes that allow this.
These attributes are colspan ” and ” rowspan and merge cells in the direction of a column (top to bottom) and a row (left to right) respectively.
You need to add these attributes to your “td” and “th” elements and give a value for the number of cells to merge according to the direction of the attribute.
If you want to merge the next 3 cells of a column you will write in the first element “td” or “th” of this column
colspan="2". Similarly for “rowspan” if you want to merge the next 4 cells in the row, you would write
rowspan="4" to the first “td” or “th” element of that same line.
The “colgroup” and “col” elements
Imagine that you want to change the background color of all the cells of several columns using the “colgroup” and “col” elements, you will be able to create a specific selection on the columns that interest you.
To select a set of consecutive columns and which starts from the first column, we will use “colgroup” where we will specify in an attribute “span” the number of columns to select.
We can then apply a class to the “colgroup” element to be able to use this CSS selector to modify the columns of the “colgroup”.
Example of using “colgroup”:
<colgroup span="3" class="colonnes"></colgroup>
If you want to make several distinct selections of columns or select a set of columns that does not start at the first column of the table, you can then complete the use of “colgroup” with several “col” elements.
In each “col” element, we can indicate the number of consecutive columns that we want to select with the “span” attribute as for “colgroup”. If no “span” attribute is specified then only one column is selected.
Example of using “colgroup” and “col”:
<colgroup> <col class="colonne1"> <col class="colonnes2et3" span="2"> </colgroup>
The “colgroup” and “col” elements are to be positioned after the “caption” or under the opening “table” tag and before any other tag, even “thead”.
Example of complex HTML table
Here is an example of a complex HTML table that puts into practice all the elements and attributes seen in this guide:
<table> <caption>Classement des participants</caption> <colgroup> <col class="colonne1"> <col class="colonnes2et3" span="2"> </colgroup> <thead> <tr> <th></th> <th>Nom</th> <th>Prénom</th> <th>Âge</th> </tr> </thead> <tbody> <tr> <th>1ère place</th> <td>Rossi</td> <td>Laure</td> <td>43 ans</td> </tr> <tr> <th>2ème place</th> <td rowspan="2">Guyon</td> <td>Augustin</td> <td>19 ans</td> </tr> <tr> <th>3ème place</th> <td>Paul</td> <td>23 ans</td> </tr> </tbody> <tfoot> <tr> <th>Lot à partager</th> <td colspan="3">100€ en bon cadeau</td> </tr> </tfoot> </table>
Result of the complex HTML table above:
HTML tables make it possible to correctly structure data without too much difficulty. A table can be formatted using style sheets to have a less “raw” rendering.
All cells can be easily selected with the various table elements including thead, tbody, tfoot, colgroup and col to edit a set of cells.
If you need to add a table to your site via an HTML table, don’t hesitate to post a free ad on Codeur.com to quickly find help from a freelancer to create your table.
Do you use WordPress? Learn how to create a responsive table with and without a plugin by following this tutorial.