HTML tutorial. Merging cells

To combine two or more cells into one, use the colspan and rowspan attributes of the tag ... The colspan attribute sets the number of cells to merge horizontally. The rowspan attribute works similarly, with the only difference that it spans the cells vertically. Before adding attributes, check the number of cells in each row to ensure that no errors are thrown. So, replaces three cells, so there should be three tags in the next line or a construction like ...... ... If the number of cells in each row does not match, empty phantom cells will appear. Example 12.3 shows, although valid, but incorrect code, in which a similar error appears.

Example 12.3. Invalid cell concatenation

Incorrect use of colspan

Cell 1		Cell 2
Cell 3	Cell 4

The result of this example is shown in Fig. 12.5.

Rice. 12.5. The appearance of an additional cell in the table

The first line of the example has three cells, two of them are concatenated using the colspan attribute, and the second line only adds two cells. This creates an extra cell that is displayed in the browser. It can be clearly seen in Fig. 12.5.

Example 12-4 demonstrates the correct use of the colspan and rowspan attributes.

Example 12.4. Merge cells vertically and horizontally

Merging cells

Browser	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Browser	Internet Explorer		Opera			Firefox
Supported	No	Yes	No	Yes	Yes	Yes	Yes

The result of this example is shown in Fig. 12.6.

Rice. 12.6. A table with merged cells

This table has eight columns and three rows. Some of the cells with the words "Internet Explorer", "Opera" and "Firefox" are combined where two, and where three cells. Vertical merge is applied in the cell labeled "Browser".

I will tell you in detail and in detail how to combine cells vertically and horizontally in tables.

In this article, we will not explain the principles of creating html tables; to gain this knowledge, take our HTML course.

To combine cells within a table, there are two attributes given to the tag they are colspan (horizontal join) and rowspan (vertical join).

Some people have difficulty using these attributes, problems with merging cells.

The colspan and rowspan attributes take integer values from 0 to 1000 as parameters. Here is a small example of how you can combine cells in a table.

At first glance, a not very complex structure is implemented, but looking at the abundance and elements in the code are difficult to understand by what principle you can combine a couple more cells.

We offer you a versatile and very convenient way to combine cells.

To begin with, prepare a blank of your future table, presenting it with all the separated cells. It could be a table 3x3, 6x10 etc. We will give each cell its own number, starting to count from left to right and from top to bottom.

Let's analyze the creation of the table shown above using this method.

This is how the code of our template and the template itself will look like:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

You need to merge cells with numbers 1,2,3 horizontally. To do this, in the code, cell number 1, add the colspan attribute with the value 3. And remove elements with numbers 2 and 3. Write the numbers of the merged cells into the resulting cell.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Now we need to merge cells 9 and 13 vertically. We perform a similar procedure - set the rowspan attribute to cell number 9 with the value 2, delete the cell from number 13, write the numbers of the cells of which it consists of the merged cell.

This will change our code and the appearance of the table:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

It remains to combine 11,12,15,16 cells into one. To do this, in cell number 11, write the attributes colspan = "2" rowspan = "2". We remove cells 12,15,16 from the code. We write numbers 11,12,13,14 in the combined cell.

This will change our code and the appearance of the table:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

That's all, we got the original table, now the cells can be filled with the information that is convenient for you.

We hope you understand the principle of creating complex tables with concatenated cells.

HTML tables have two functions. The first is the tables themselves, that is, the output of information in the form of a table. And the second is the layout of the page. Separate pieces of content are placed in different cells of the table and thus appear in the right place on the page.

Creating a table

Let's take a look at how to create a table in HTML. This is done using the tag

... Tables are made up of rows with cells inside them. These cells contain the content of the table. Tag adds a row to the table, and the tag

adds a cell to a row. Remember to close tags. For example, let's create a table like this:

In order for the table frames to be visible, the tag

the border attribute has been set, but HTML5 deprecates this attribute and deprecates it. In addition, there are other attributes for working with frames and changing the background, and cells also have attributes for aligning content. All of these attributes are also deprecated, styles should be used instead.

Concatenate table cells

It is possible to combine table cells into one. To do this, the tag

there is a colspan attribute that concatenates cells within the same row, and a rowspan attribute that concatenates cells from different rows. The value of these attributes is the number of cells to merge.

Let's create a table like this:

Please note that in the second row of the table, one cell takes the place of two cells, so the total number of cells in this row will be less than in the others, in this case, one.

Now let's create a table like this:

Additional table tags

In addition to the tags that we used, there are also tags that are also used when creating a table.

- header cell. Usually found in the first row of a table. Used to create a name for a table column. From tag

differs only in bold and center alignment.

- is inside the tag , adds a title to the table.

- contains the first few lines of the table to indicate a particular style. There can be only one such tag in the table. The lines it contains must start from the very first line.

- contains several lines of the table to indicate a particular style. There can be several such tags in the table.

- contains table rows that will be displayed at the very bottom of the table.

- defines the style for one column of the table, starting from the first. That is, the first such tag will specify the style for the first column, the second tag for the second column, and so on. Works differently in different browsers.