Concatenation of cells and columns in html. Combining cells. Combining vertically

Lesson 11.

Concatenation of table cells.

In this lesson, we continue to study tables, namely, we will look at two more attributes for the tag & lttd & gtwhich are responsible for combining cells. Looking at the picture below, you will understand what kind of association will be discussed.

The table on the left has the usual structure. The table on the right has two cells in the first row joined together to form one large cell.

Applying these attributes is a little trickier than applying others. This is why they are given a separate lesson.

Colspan attribute.

Attribute colspan used to combine cells horizontally. The attribute value indicates the number of cells to be combined into one.

Attention! It is very important that the total number of concatenated and regular cells in one row is equal to the total number of cells in the other row. Consider as an example the right table in the first figure. The top line contains only one large cell, consisting of two regular cells, and the bottom line contains two regular cells.
Below is a variant of the correctly written code:


Explanations for the code:
Top line & lttr & gt has one cell & lttd & gtfor which the attribute is assigned colspan with the meaning 2 ... This means that this cell combines 2 cells, respectively, this cell replaces 2 cells. Second line & lttr & gt has 2 regular cells & lttd & gt.
It turns out that in the top row we have two cells merged with each other, and in the bottom row we have two ordinary cells. The number is equal, which means the code is written correctly.

Now for a code example with a common error:


Explanations for the code:
The error is that the first line & lttr & gt contains not two cells & lttd & gt, and three, while the second line & lttr & gt contains two cells & lttd & gt.
Looking at the code, visually it seems that the number of cells in the lines is the same, since the number of tags & lttd & gt the same. But one of the tags & lttd & gt has the attribute colspan with the meaning 2 , this means that this one cell takes the place of two.

Rowspan attribute.

Attribute rowspan used to merge cells vertically. The principle of operation is exactly the same as that of the attribute. colspan.


Explanations for the code:
Top line & lttr & gt has three cells & lttd & gt, for one of them the attribute rowspan with the meaning 3 ... This means that this cell contains 3 cells (which is set to the attribute + 2 bottom cells vertically). As I said, the first row has 3 cells, which means that the bottom two rows must also have three cells. Looking at the code, we can see that the bottom two lines & lttr & gt have only two cells & lttd & gt, but do not forget that the first cell of the top row took its place + two more cells below it. This means that the total number of cells in each of the individual lines is three.

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 the same way, 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 occur. 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.

Figure: 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. Combining cells vertically and horizontally

Merging cells

Browser Internet Explorer Opera Firefox
6.07.07.08.09.01.02.0
Supported NoYesNoYesYesYesYes

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

Figure: 12.6. 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 applied in the cell labeled "Browser".

tables best viewed with a simple table, as shown in Listing 5.10 in HTML.

This is an ordinary table, the cells of which are numbered - so it will be easier for us in the future. In fig. 5.2 shows its appearance in a Web browser window.

Now consider the table in Fig. 5.3.

Some cells have been merged here. It can be seen that the merged cells seem to have merged into one. How to do it?

Especially for this, tags and support two notable optional attributes. First - COLSPAN - merges cells horizontally, the second -ROWSPAN- vertically.

To combine multiple cells horizontally into one, follow these steps.

1. Find the HTML tag ( ) corresponding to the first of the cells to be merged (if cells are counted from left to right).

2. Add the COLSPAN attribute to it and assign it the number of cells to be merged, including the very first one.

3. Remove tags ( ) that create the rest of the merged cells of this row.

Let's merge cells 2 and 3 of the table (see Listing 5.10). The revised code snippet that creates the first row of this table is shown in Listing 5-11.

In the same way, create the merged cells 4 + 5 and 12 + 13 + 14 + 15.

Merging cells vertically is a little more difficult. Here are the steps to follow.

1. Find in the HTML code the line (tag) in which the first of the merged cells is located (if you count the lines from top to bottom).

2. Find the tag ( ) corresponding to the first of the merged cells.

3. Add the ROWSPAN attribute to it and assign the quantity to it merged cells, including the very first of them.

4. View subsequent lines and remove tags from them ( ) that create the rest of the cells to be merged.

We have left merge cells 1 and 6 of our table. Listing 5.12 contains a revised snippet of her HTML (the fixes will affect the first and second lines).

Notice that we removed the tag that creates the sixth cell from the second row, since it merged with the first cell.

Now it is not used very often. However, earlier, during the heyday of tabular Web design, it was difficult to find a table without merged cells... One way or another, it doesn't hurt to know about him.

Excel tables are built in a slightly different way than in Word. If in the latter we can divide cells, then in Excel a cell is an indivisible unit. The issue of getting two columns under one common header is quite common, so it is important to know how to combine cells in Excel, since in this case it is necessary to combine a fragment of a table.

Method 1 - Toolbar.

On the panel, you will see a merge button.

To use it, highlight the range to be merged and click it.


As a result, the union will be made.


If you click on the arrow next to this button, you will see a menu.

The Merge & Center command allows you to center the content of a new slice. If you try to merge a range with a value, only the data from the first of the merged addresses will be saved. And you will see a warning.


Consent will result in the loss of the rest of the data.


The Merge By Rows command will create consolidated cells in each row.



The "Merge Cells" command is similar to the first, only without centering the text.


The last paragraph answers the question of how to reverse the merging of cells in Excel.

Method 2 - using the menu

In recent versions of the office, the classic menu has been replaced with tabs. And familiar windows are called up using small icons in the lower right corner of the tab.


Do not forget to first select the cells to be merged and click on this icon. The alignment window will appear.


Check the box next to "Merge cells". Here, in the corresponding drop-down fields, you can specify the data alignment parameters.

Method 3 - copying already merged data

If you need to reproduce an existing union, then use the clipboard. The keyboard shortcut for merging cells in Excel in this case will be as follows:

CTRL + C - copy to clipboard.
CTR + V - paste from clipboard.

Move the pointer to the selected position.


Copy by pressing CRTL + C. A sign that the data will be copied will be "running ants" - animation of the frame along its borders.


Place the cursor on the desired cell. It is not necessary to allocate the same number of addresses, Excel will automatically select the required number and execute the command. True, the data will be lost. Click the buttons to paste from the clipboard. A similar union will appear at the selected location.

Method 4 - Format by Sample

Excel, like any other Office program, has a very handy Format Painter button.
It's in the "Clipboard" section.


Move the pointer over the merged slice and click this button. Move the pointer to the desired location and click. The formatting will be fully reproduced.

While the command is pending, a brush icon will hang next to the mouse pointer. As soon as you click with the mouse, the icon disappears and a new merged fragment appears.

How to concatenate cell content in Excel spreadsheet while keeping data

This is an actual problem. In any of the previous methods, Excel deletes the data. To save them, use the "Link" function.
Click the Fx icon next to the formula bar. This will bring up the function insertion window.


Enter the name "Link" in the search bar and click the "Find" button.



Highlight the found function and press "OK". The setup window will appear.


Specify the range with your hands or select it with the mouse.


Please note that the function must be at a separate address from the merged ones. If you need to put the consolidated data into the merged range, then do the merge in advance, and then enter the function there.

There are no hotkeys that allow you to merge cells in Excel without losing data, so you can use other methods.

Another possibility to combine text from multiple Excel cells
- use the "&" operator, which performs string concatenation. To start entering a formula, place the pointer where the new text will be and press the "\u003d" sign. Then click on the first address, click &, click on the second, and so on.


Combining text from two different cells into one in Excel versions 2003-2010 is similar.

How to remove concatenation of cells in Excel

You can use the last item from the menu of the "Merge cells" button.


Or you can uncheck the box in the formatting window.

How to combine using a macro

One of the most difficult ways is to write a program yourself that will automate the process. The VBA code developer has been added to Microsoft Office. To use it, press ALT + F11. The window for adding program code will open.


Run the Insert - Module command.


A window for entering data will open.


Copy and paste the code.

Sub Merge_Column () Dim i1 As Long Dim i2 As Long Dim f As Long Dim textCol As String Application.DisplayAlerts \u003d False For f \u003d 1 To Selection.Areas.Count For i1 \u003d 1 To Selection.Areas (f) .Columns.Count textCol \u003d Selection.Areas (f) .Cells (1, i1) For i2 \u003d 2 To Selection.Areas (f) .Rows.Count textCol \u003d textCol & Chr (10) & Selection.Areas (k) .Cells (i2, i1) Next Selection.Areas (f) .Columns (i1) .Merge Selection.Areas (f) .Cells (1, i1) \u003d intext Next Next Application.DisplayAlerts \u003d True End Sub

Switch to Excel by clicking on its icon in the upper left corner.


Select the range to be merged and run the macro on the "View" - "Macros" tab.


Select the required macro and click the "Run" button.


Fragments of the table will be merged.

Cell button is not active in Excel

This is a rare case, but it happens nonetheless.

Sort merged cells in Excel

The difficulty here is that all the sorted fragments must be of the same size. Therefore, you need to cancel the join operation for non-standard joins in a column or row, and perform it again in the same size as all the others. For example, if you are trying to sort a column where everything is combined by two, and one by three - either combine everything by three, or translate the three-cell into two. Otherwise, you will get this error


After you put the merges in order, click the "Sort and Filter" button in the toolbar (on the right) in the "Home" section.

Select the type of sort you want.

How to find merged cells in Excel

If the Excel worksheet is large, it can be difficult to find the combined data on it. In this case, let's use the search. On the Home tab, click the Find and Select button and select Find. Or press the hotkeys Ctrl + F. Read more


Then click Options and Format.


Check the box next to "Merge cells" and click "OK".


Then click "Find All" or "Find Next", and the required addresses will be highlighted sequentially. When you click on the first button, you will see a list of all combined ranges.


That's all the information on merged cells. We hope it will help you to quickly and easily create workbooks in Excel and work with them without any problems.

Have a great day!

It's actually very easy if you've already created HTML tables. After learning a couple of parameters, you will learn how to merge table cells. For an example of a table with cells merged horizontally and vertically, see, for example, the previous article on.

Let's look at how cells are combined using the example of a 5x5 HTML table. To create tables I am using. The code of the 5x5 table created by the designer looks like this:

< div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" > C1R1 < td align= "left" > C2R1 < td align= "left" > C3R1 < td align= "left" > C4R1 < td align= "left" > C5R1 < tr> < td align= "left" > C1R2 < td align= "left" > C2R2 < td align= "left" > C3R2 < td align= "left" > C4R2 < td align= "left" > C5R2 < tr> < td align= "left" > C1R3 < td align= "left" > C2R3 < td align= "left" > C3R3 < td align= "left" > C4R3 < td align= "left" > C5R3 < tr> < td align= "left" > C1R4 < td align= "left" > C2R4 < td align= "left" > C3R4 < td align= "left" > C4R4 < td align= "left" > C5R4 < tr> < td align= "left" > C1R5 < td align= "left" > C2R5 < td align= "left" > C3R5 < td align= "left" > C4R5 < td align= "left" > C5R5

C1R1 C2R1 C3R1 C4R1 C5R1
C1R2 C2R2 C3R2 C4R2 C5R2
C1R3 C2R3 C3R3 C4R3 C5R3
C1R4 C2R4 C3R4 C4R4 C5R4
C1R5 C2R5 C3R5 C4R5 C5R5

The table itself initially looks like this:

C1R1 C2R1 C3R1 C4R1 C5R1
C1R2 C2R2 C3R2 C4R2 C5R2
C1R3 C2R3 C3R3 C4R3 C5R3
C1R4 C2R4 C3R4 C4R4 C5R4
C1R5 C2R5 C3R5 C4R5 C5R5

I. Merging cells vertically
To vertically merge cells, use the option rowspan, specifying the number of vertically merged cells.
Let's combine cells C1R1 and C1R2 in the above table. This requires:

  1. For cell C1R1 add the parameter rowspan \u003d "2":

C1R2

The table now looks like this:

C1R1 C2R1 C3R1 C4R1 C5R1
C2R2 C3R2 C4R2 C5R2
C1R3 C2R3 C3R3 C4R3 C5R3
C1R4 C2R4 C3R4 C4R4 C5R4
C1R5 C2R5 C3R5 C4R5 C5R5

II. Concatenate cells horizontally
To merge cells horizontally, use the parameter colspanthat specifies the number of horizontally merged cells.
Combine cells C2R1, C3R1 and C4R1 in the above table. This requires:

  1. For cell C2R1 add the colspan \u003d "3" parameter:

C3R1 C4R1

The table will look like this:

C1R1 C2R1 C5R1
C2R2 C3R2 C4R2 C5R2
C1R3 C2R3 C3R3 C4R3 C5R3
C1R4 C2R4 C3R4 C4R4 C5R4
C1R5 C2R5 C3R5 C4R5 C5R5

You just have to fill in the table with the content: samples of your translations in your portfolio, etc.