HTML tables are a very handy element. You can do anything with them. Of course, the main purpose is to place information in the form of a table. But website developers went further. At one time, it was very popular to use tables to create a wireframe for a site. Now professionals are trying not to do that.
Tables have found widespread use due to the large number of attributes. For example, the property of combining rows or columns turned out to be very useful.
Introduction to Theory
In HTML, cells are merged using two attributes: colspan and rowspan. They are specified for the td tag.
Let's first analyze the structure of any table before we delve into the topic. Any table has a row, and there are cells in it. Remember that initially all tables should contain the same number of cells.
The figure above shows two lines, each with three cells. This is a regular table. If you specify a smaller number of cells in any row, then the table will “move out”, everything will be displayed incorrectly.
HTML table: merging cells vertically and horizontally
Fewer cells or rows can be specified 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 the columns, then colspan, if the rows, then rowspan. The attribute value indicates the number of elements to be combined.
Please note that you need to specify it in the nearest element to the beginning. For example, in the figure above, if you would like to combine cell 1 and 2, you need to specify the colspan attribute in cell 1 with a value of two. And deleting cell number 2 or 3 is not important anymore.
The bottom line is that you tell the cell how much space it takes. The default value is 1.
Merging cells vertically in an HTML table follows the same principle. Just the occupied space will be counted vertically. See the picture below.
Here, the cell with the number 43 occupies two lines. For this, the rowspan attribute was specified. It is remembered simply:
- Row is a string.
- Col - column / column.
- Span is a union.
The creators of the language tried to bring it as close as possible to the human, so that even without knowing it, it would be possible to understand at least somehow.
In HTML, merging cells can be done in two directions at once: vertically and horizontally. To do this, specify both attributes at the same time.
In the figure above, this is precisely what indicated that it is possible to do the union: rows, columns and at the same time columns and rows.
HTML: merging cells. Examples
Consider more complex step-by-step examples in large tables. The figure on the left shows the original version of the regular table. And on the right - the option of combining two cells in the second row. So it’s more visual and easier to compare HTML code.
You can also combine the three cells in the center. In the first case, the colspan attribute was indicated in cell No. 1. Here, the first will be unchanged, and in the second <td> added colspan, equal to three.
If you want to merge all the cells in the row to one, then delete four td and specify colspan = '5' in the first.
As you can see, in reality all this is simple. There is nothing complicated. The main thing is, carefully, from the first try, to understand all the pitfalls of the tables, and then no problems should arise.
Tables as a wireframe
In HTML, cell union is not always used for regular tables with information (as in Word or Excel). Website developers often used to use them for website typesetting.
For example, you can consider this site layout. This design is very simple and primitive. But here you can show the use of the union explicitly.
There was originally a table of three rows, two cells in each. Then, to place the logo of the site, two cells in the first line were merged. The bottom line did the same to place the "basement".
Thanks to this, it is possible to place design elements in their places, and nothing will go anywhere beyond its borders. It is very convenient and simple. Therefore, it was so popular. Now it is recommended to create div tags for creating blocks.
Conclusion
And remember that in the HTML table you can do the union of cells as you like. It all depends on what you need and how you want to arrange it. The main thing is not to get confused. If you want to create a large table with a large number of joins, it is recommended that you first draw it all on a piece of paper or in Paint. Beginner typesetters will be easier.
When you gain experience, you can easily perform such operations in your head.