HTML From Beginner to Advanced, Part 2: Tables
Now let’s learn everything about tables.
Introduction
Tables are essential to organize information like Excel in 2 dimensions, that explains why I present them only now, you need to have a full understanding of the HTML tags also you need to know CSS, I will be adding that course very soon too.
We will start by building a basic table, then use it in a complicated way by doing layouts with them. We will learn how to: fuse/merge cells, dividing them… We will customize them by using their specific CSS properties.
Tables
The first tag to know is <table> </ table>. This tag is used to indicate the start and end of a table. This tag is of type block.
Now with tables the thing is that you will have to learn many new tags. The first two are:
<tr> </ tr>: indicates a row of the table;
<td> </ td>: Indicates the contents of a cell.
In HTML, a table is constructed line by line like Excel. In each line (<tr>), the contents of the different cells (<td>) are indicated. Schematically, a table is constructed as in the following figure.
We have the row (<tr>) that includes a group of cells (<td>).
For example, if I want to make a two-row table, with three cells per row (so three columns), I’ll have to write this:
You can see that so far it doesn’t look like a table because we don’t have any grid. That’s okay this is something we can add using CSS.
Adding borders is very simple, you already know the corresponding CSS code:
It’s not as perfect as we’d like, we are getting a weird space in between the borders. Indeed, we would like there to be only one border between two cells, To do so there is a table-specific CSS property called border-collapse, which means “collide, collapse the borders”.
This property can take two values:
- collapse: the borders will be glued together, this is the effect we are looking for here.
- separate: the borders will be dissociated (default value)
The table header tag
Now that we have what we wanted, we will add the header line of the table. In the example below, the headings are “Name”, “Age” and “Country”.
The header line is created with a <tr> as we have done so far, but the cells it contains are, this time, framed by <th> tags and not <td> . The header line is very easy to recognize for two reasons:
- cells are <th> instead of the usual <td>;
- this is the first line of the table.
Since the names of the cells are a little different for the header, you have to think about updating the CSS by adding the borders also to the th:
Table title
Normally, every table must have a title at the top to understand the content of your table. Our example consists of a list of people but for what , what’s the purpose?
To do so you can use the <caption> tag . This tag is always at the beginning of the table, just before the table header.
Be aware that you can change the position of the title with the CSS caption-side property that can take two values (even though you wrote it in HTML at the beginning of your table):
- top: the title will be placed at the top of the table (default).
- bottom: the title will be placed after the table.
Structured Tables
There are two specific techniques:
- For large tables, it is possible to divide them into three parts:
- a header
- a body
- a footer
For some tables, you may need to merge cells together.
Dividing a big table : If your table is big enough, you will be interested in cutting it into several parts, mostly to organize yourself and the content of your HTML. There are 3 HTML tags that define the 3 “zones” of the table:
- the header (at the top): it is defined with the tag <thead> </ thead>
- the body (in the center): it is defined with the tag <tbody> </ tbody>
- the foot of the table (bottom): it is defined with the tag <tfoot> </ tfoot>
What is the purpose of the footer in table?
Generally, if it’s a long chart, you copy the header cells in it. This allows you to see, even at the bottom of the table, what each columns refers to.
It’s a bit confusing but it is advisable to write the tags in the following order:
- <thead>
- <tfoot>
- <tbody>
The browser will display each item in the correct space. it is mostly to simplify the life of the developers when they have to maintain, modify the header: they don’t have to scroll untill the end of their HTML to make sure that they are all consistent.
But considering that these 3 tags are optionals if your table is simple then don’t use it. As I said they are just here to organize more the content of your table if needed.
Merge of a table : In some complex tables, you will need to “merge” cells together.
For the last row, you see that the cells have been merged. To merge, we add an attribute to the <td> tag.
We can do 2 types of merge of cells: columns or rows
- The merging of columns: this is what we’ve done in the previous example. The merge is done horizontally which means that you visually erase a vertical bar. We use the attribute colspan.
- The merging of lines: two lines will be grouped together which means that you delete a horizontal border. We use the attribute rowspan.
You must give a value to the attribute (whether it’s rowspan or colspan). It is necessary to indicate the number of cells to be fused together.
In our example, we want to merge two cells: the column “For children? and “For teenagers? “. We will have to write:
which means: “This cell is the merge of two cells”. It is possible to merge more cells at a time (three, four, five … as many as you want).
Note: in the code below you will see that the 4th row contains only two cells instead of three (there are only two <td> tags). This is normal because we merged the last two cells together.
That the complicated part you always need to keep count of your cells merged or not to make sure that your gris and the amount of cells is always matching.
The <td colspan=”2″> indicates that this cell takes the space of two cells at a time.
For the vertical fusion with rowspan:
In this case, the colspan is no more suitable, it is rowspan that we should use:
Note : that you can change the vertical alignment of the text in each cells table with the vertical-align property that you have already seen.
If you find my content helpful please consider making a donation at:
https://ko-fi.com/devondeveloper
This content it’s free but believe me, if you take a coding bootcamp or web development course there is no real difference with the information you just read. By making a donation You are helping to keep creating Great Quality content for You, so you can become the Best web developer you can be.
