A lesson in HTML. Merging cells

Tables in HTML are a very convenient element. You can do anything with them. Of course, the main purpose - the placement of information in the form of a table. But the site developers went further. At one time it was very popular to use tables to create a site skeleton. Now professionals are trying not to do so.

Tables are widely used due to the large number of attributes. For example, it was very useful to combine rows or columns.

Introduction to the theory

In HTML, the union of cells occurs using two attributes: colspan and rowspan. They are specified for the td tag.

Let's start by examining the structure of any table before we go into the topic. In any table there is a line, and in it there are cells. Remember that initially all tables should contain the same number of cells.

The figure above shows two lines, and each has three cells. This is a normal table. If you specify a smaller number of cells in any row, then the table will "go", everything will be displayed incorrectly.

HTML table: combining cells vertically and horizontally

You can specify fewer cells or rows only if you combine something. But instead of the deleted element in the nearest neighbor to the beginning, you need to specify an additional attribute. If you combine columns, then colspan, if the rows, then rowspan. The value of the attribute indicates the number of elements to be merged.

Note that you need to specify exactly in the nearest element to the beginning. For example, in the figure above, if you wanted to merge cell 1 and 2, you need to specify in cell 1 a colspan attribute with a value of two. And to delete cell number 2 or 3 is no longer important.

The bottom line is that you tell the cell how much space it will take. The default value is 1.

Joining the cells vertically on the HTML table is the same. Just occupied space will be considered vertically. See the picture below.

Here the cell with the number 43 occupies two lines. To do this, you specified the rowspan attribute. It is remembered simply:

• Row is a string.
• Col column / column.
• Span - association.

The creators of the language tried to bring it as close as possible to the human, so that, even without knowing it, one could at least somehow understand.

In HTML, the union of cells can be done in two directions at once: vertically and horizontally. To do this, specify both attributes simultaneously.

In the figure above, just this is indicated, that you can do a join: rows, columns, and at the same time columns and rows.

HTML: Merge cells. Examples

Consider more complex, step-by-step examples in large tables. Below in the figure on the left is the original version of the regular table. And on the right - a variant with the union of two cells in the second line. It's easier to compare HTML code.

You can also combine three cells in the center. In the first case, the colspan attribute was specified in cell # 1. Here the first will be unchanged, and in the second a colspan equal to three is added.

If you want to combine all cells in a row to a single one, then delete four td and in the first specify colspan = '5'.

As you can see, in fact, it's all simple. There is nothing complicated. The main thing is, carefully, from the first time, to understand all the pitfalls of the tables, and then no problems should arise.

Tables as a site skeleton

In HTML, the union of cells is not always used for ordinary tables with information (as in Word or Excel). Website developers often, but used to use them for website layout.

For example, you can consider this site layout. This design is very simple and primitive. But here you can show the use of the association explicitly.

Here initially there was a table of three lines, two cells each. Then, in order to place the site's logo, the two cells in the first line were merged. The bottom line did the same to place the "basement".

Thanks to this, you can place design elements in their places, and nothing will go anywhere beyond its limits. This is very convenient and simple. That's why it was so popular. Now it is recommended to create a div tag block.

Conclusion

And remember that in the HTML table, you can combine the cells as you like. It all depends on what you need, and how you want it done. The main thing, do not get confused. If you want to create a large table with a large number of joins, it is recommended that you first draw all of this on a piece of paper or in Paint. It will be easier for beginners.

When you gain experience, you can easily perform such operations in your head.