Importance of tables in HTML
Today the tables are less important in the website coding than few years ago. Previously websites were created with the help of so-called table-layout, and the tables were backbone and foundation of the websites. Later with the development of HTML and appearance of an increasing number of portable devises with Internet access (tablets, smartphones) the sites coded by means of tables started to “slide”, i.e. they didn’t fit on the screen and looked clumsily. That’s why it became necessary to create a versatile, adaptive and responsive layout.
So now the tables are used for the intended purpose – for a structured presentation of information, be it a menu, price-list or result slip.
Basic table tags
A table consists of a number of mandatory tags:
- <table > (table) - it tells a browser that it contains a table inside
- <tr> (table row) defines a table row
- <td> (table data) defines a table cell. In this tag we put everything of which the table will consist: text, pictures, lists, buttons and even other tables
Let’s take a brief look at how it looks in the code:
That is, in order to create a table with 3 columns and 4 rows we need to write the <tr> tag four times, and to write the <td>. element in each of them. Let’s check it?
As you can see, by default our table doesn’t have any borders. In HTML5 the borders, the color of borders and background work by means of CSS.
Do you remember, that HTML is responsible for the page layout, and CSS – for its design? Very soon we’ll show you how to create beautiful and complex tables in a modern layout, but in this article we would like to give you the information which will help you to understand how to mark the table, instead of how to decorate it.
Is order to give a name to a table you need to use the tag <caption>.
In most cases, the first table row describes those values, which are in the columns, and somehow stands out among other rows.
In HTML there is a special tag<th> (stands for table header) for this purpose. It is written instead of <td> in the first line. Let’s take a look at the example of our mini-dictionary and check how it works:
Please note, that the data in the first line is written in bold and are aligned according to column center.
Sometimes you need to highlight not only the first row, but the first column as well. For example, you can do it as follows:
Do you believe that there is a special tag for this? Well no, there isn’t 🙂 We still use the same <th>tag, but in this case we don’t write it in place of <td> in the first line, instead we write it in place of the first <td> in each line, just like this:
An interested reader must have noticed, that the first cell of the first column is empty. If you need an empty cell in your table – you still need to create it by not writing anything between <th></th> or <td></td> tags. If you don’t do it, a browser will move the rest of the cells at it sees fit, and the content of the table will slide. You can try to remove the <th></th> element in JSFiddle and see what happens.
How to merge cells vertically
Sometimes the neighboring cells have the same data, and they can be written once instead of multiple times.
The rowspan attribute merges the cells of neighboring rows (i.e. vertically).
Examples of merged cells:
Let’s create a table like this. To make the fact that the cells are merged more evident, we will draw borders to it. To do it, we use the outdated attributes, which are assigned for the <table> tag:
border is responsible for the thickness of borders, by default the value is in pixels
cellpadding sets the space between the cell wall and the cell content. If it is equal to 0, then it means that the text (or any other content) is closely adjacent to the cell wall. In the case of text it isn’t very beautiful, that’s why we assign a value of 4 pixels to it.
cellspacing sets the space between the cells. If it is equal to 0, the cell walls superimpose on one another. If the value is bigger – each cell is separated from another by a predetermined distance and the result is something like a double border. It looks a bit of an acquired taste:
If we set the border attribute, then by default cellspasing equals 2 pixels. That’s why if we want to have the borders but don’t want the gaps between them – we should specify that cellspasing = “0”.
Here you can see how tight the text is placed inside the cells. The reason for this is that we assigned the value 0 to cellpadding.
So, how does the rowspan attribute work? Before you mark up the table – draw it by hand on a piece of paper or create it in Excel, so it will be easier to make sense of all these lines and columns.
Our table “Comparison of models” is like a map of Battleships game:
There are 4 columns and 4 rows,
in the second column the second and third cells are merged – we arrange the ship.
In the fourth column the third and fourth cells are merged – we arrange the ship.
But in HTML we write code in lines, not in columns. How should we write it in our code?
It is obvious, that we should leave the first line unchanged – we write <tr></tr> and put 4 elements <th>in it.
The second line: we write <tr></tr> and put 4 elements <td>in it, but now we assign the attribute rowspan=”2” to the second element (it means that two cells will be merged).
The third line: we write <tr></tr>, and now we have only 3 elements <td>, because one of them, which is in the second column, was “taken away” by the top cell. We should assign the attribute rowspan=”2” to the last <td> element.
The fourth line: again we write only 3 elements <td>inside the <tr> element, because it doesn’t exist in the fourth column anymore – it was merged by the top cell.
Again, let’s take a look at our table, but this time with tags. You should read it like a book – from left to right, from top to bottom:
Finally, we can check how it works in the editor:
How to merge cells horizontally
The attribute colspan merges the cells of the neighboring columns (i.e. horizontally). The principle here is the same as with rowspan.
For example, we need to create a table as follows:
Again, let’s read it from left to right, from top to bottom:
- Line No.1: five <th>, and the first one is empty
- Line No.2: one <th> and three <td>, the second and third cells are merged, i.e. we assign the value colspan=”2” to the second <td>
- Line No.3: one <th> and two <td>, the third, fourth and fifth cells are merged, i.e. we assign the value colspan=”3” to the third <td>
- Line No.4: one <th> and two <td>. The second, third, fourth and fifth cells are merged – we assign the value colspan=”2” to both <td>
Schematically it can be displayed as follows:
Now let’s take a closer look at the code and the result:
Everything worked out 🙂
A perfectionist can say that the columns are of different width and for this reason the table looks ugly. Yes, the browser automatically aligns the column width with the widest text that it contains. To make all the columns with the same width, you need to assign some fixed size using CSS. Therefore, we will learn how to create beautiful tables a little bit later, when we’ll talk about CSS.
That’s all for now, see you!