Table Creation in HTML

The Importance of Tables in HTML

Nowadays, tables are less important in website coding than they were a few years ago. Previously, websites were created with the help of a so-called table-layout, and tables were the foundation and skeleton of websites. However, with the development of HTML and the popularity of Internet-accessible portable devices (tablets, smartphones), sites coded by means of tables started to “slide,” i.e. they looked clumsy and didn't fit. That’s why it became necessary to create a versatile, adaptive, and responsive layout.

So nowadays tables are used for the structured presentation of information, whether it is a menu, a price-list, or a result slip.

Basic Table Tags

A table consists of a number of mandatory tags:

• <table > (table) - 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 which the table will consist of: text, pictures, lists, buttons, and even other tables.

Let’s take a brief look at how it appears in the code:

So in order to create a table with 3 columns and 4 rows, we need to write the <tr> tag 4 times and, in each of them, we need to write the <td> element 3 times. Let’s check if it's true.

As you can see, by default, our table doesn’t have any borders. In HTML5, the borders, the color of the borders, and the background all work by means of CSS.

Remember how we said that HTML is responsible for a page's layout, while CSS is responsible for a page's design? Well, we'll soon show you how to create beautiful and complex tables in a modern layout, but in this article, we'll give you the information which will help you understand how to mark a table, instead of how to decorate one.

Table Heading

In order to give your table a name, you need to use the tag <caption>.

In most cases, the first table row describes the values which are in the columns and somehow stand out among the other rows.

In HTML, there is a special <th> tag ("th" stands for table header) for this purpose. We write it instead of <td> in the first line. Let’s take a look at the example of our mini-dictionary and see how it works:

Please note that the data in the first line is written in bold and aligned to the center of the columns.

Sometimes you need to highlight not only the first row, but the first column as well. For example, you can do it as follows:

Is there a special tag to do this? Well, unfortunately, no. There isn’t 🙂 We have to use the same <th> tag. However, in this case we don’t write <th> in place of <td> in the first line; we instead write it in place of the first <td> in each line, like this:

An attentive student may have noticed that the first cell of the first column is empty. If you need an empty cell in your table, you nevertheless have to create it by not writing anything between the <th></th> or <td></td> tags. If you don’t, the browser will move the rest of the cells as it sees fit and the content of the table will slide. If you want, you can 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, therefore, the data 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 for it. To do so, we use the outdated attributes which are assigned to 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 equals 0, then it means that the text (or any other content) is directly next to the cell wall. If the text isn’t very beautiful, we assign a value of 4 pixels to it.

cellspacing sets the space between the cells. If it equals 0, the cell walls superimpose on one another. If the value is greater than zero, then each cell will be separated from another by a predetermined distance and the result will be something like a double border. The look is a bit of an acquired taste:

If we set a border attribute, then the cellspacing is 2 pixels by default. That’s why if we want to have the borders, but we don’t want gaps between them, then we need to specify that cellspasing = “0”.

 

You can see for yourself how snug the text is inside the cells. This is due to the fact 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; it will make it easier to make sense of all the lines and columns.

Our “Comparison of Models” table looks like the ruled grids from the board game Battleship:

There are 4 columns and 4 rows.
In the second column, the second and third cells have been merged – we placed a ship.
In the fourth column, the third and fourth cells have been merged and we placed another ship.
But in HTML, we write code in lines, not in columns. So how do we write it in code?

It's clear that we should leave the first line unchanged. Therefore, we write <tr></tr> and put 4 <th> elements in it.

The second line: we write <tr></tr> and put 4 <td> elements in it, but now we assign the attribute rowspan=”2” (this means that two cells will be merged) to the second element.

The third line: we write <tr></tr>, and now we have only 3 <td> elements, because one of them, in the second column, was “taken away” by the top cell. We need to assign the attribute rowspan=”2” to the last <td> element.

The fourth line: again, we write only 3 <td> elements inside the <tr> element, because the element doesn’t exist in the fourth column anymore – it has merged with the top cell.

Let’s take another look at our table, but this time with tags. Read it like a book: from left to right and from top to bottom:

And let's see how it works in the editor:

How To Merge Cells Horizontally

The colspan attribute merges the cells of neighboring columns (i.e. horizontally). The principle here is the same as with rowspan.

For example, we need to create a table like the following one:

Again, let’s read it from left to right, top to bottom:

• Line No.1: five <th>'s, and the first one is empty
• Line No.2: one <th> and three <td>'s. 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>'s. 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>'s. The second, third, fourth, and fifth cells are merged (i.e. we assign the value colspan=”2” to both <td>'s)

Schematically, it can be displayed as follows:

Now let’s take a closer look at the code and the results:

Everything works out 🙂

A perfectionist will say that the columns are of different widths and that it makes the table look ugly. Yes, the browser automatically aligns the column width with the widest text that it contains. To give all the columns the same width, you need to assign a fixed size with the help of CSS. We will learn how to do that a little later when we talk about CSS.

That’s all for now. See you!