Unlinking a php table cell. HTML Lesson

HTML tables organize and display data using rows or columns. Tables are made up of cells formed by the intersection of rows and columns. Table cells can contain any HTML elements such as headings, lists, text, images, form elements, as well as other tables. You can add a title associated with each table, placing it before or after the table.

Tables are no longer used for the layout of web pages and the layout of individual elements, because this technique does not provide structural flexibility and adaptability of the site, significantly increasing the HTML markup.

For all table elements, as well as their own attributes are available.

Creating tables in HTML

• Content:

1. How to create a table

The table is created using a paired tag

Fig.1. Appearance of the table without formatting with CSS properties

By default, the table and cells have no visible borders. Borders are set using the border property:

/* outer borders of the table are gray, 1px thick */ table (border: 1px solid grey;) /* borders of the cells of the first row of the table */ th (border: 1px solid grey;) /* borders of the cells of the table body */ td (border: 1px solid gray;)

Spaces between table cells are removed using the table property (border-collapse: collapse;) .

Width The table defaults to the width of its internal content. To set the width, you need to set the width property:

/* will make the width of the table equal to the width of the container block in which it is located */ table (width: 100%;) /* will set a fixed width for the table */ table (width: 600px;)

If table cells have padding and borders specified, the table width will include the following values:
padding-left and padding-right , the width of border-left plus the border-right width of the last cell in the row. If the width and borders of the cells are specified, then the width of the table will be the sum of the width of the cells plus the border-left width and border-right width of the last cell in the row.

2. How to create table rows

Table rows or rows are created using the tag

. The number of horizontal table rows is determined by the number of paired tags .

3. How to make a table column header cell

creates a column header - a special cell in which the text is highlighted in bold. The number of header cells is determined by the number of tag pairs

4. How to make a table body cell

creates table cells into which table data is placed. Paired tags , located in one row, determine the number of cells in a table row. Number of cell pairs must be equal to the number of pairs of cells. The attributes available for the element are colspan, rowspan, headers.

5. How to add a caption (title) to a table

Creates a table signature. Added directly after the tag

6. Grouping table rows and columns

Creates a structural group of columns, highlighting logically homogeneous cells. Groups one or more columns for uniform formatting, allowing you to apply styles to columns rather than repeating styles for every cell and every row. Added directly after tags Rice. 2. Highlighting table columns in a different color using tags and

7. Grouping table sections

The element creates a group of headings for table rows to provide a uniform appearance. Used in combination with elements

And to indicate each part of the table.

The element must be used in the following order: as a child element

, after and, and before , And elements. Can be used once within one table.groups the main table contents. Used in combination with elements and .

Creates a group of rows to represent information about amounts or totals, located at the bottom of the table. Used once in the table. Placed after the tag, before the tags

And .

This grouping of rows was included in the standard in the hope that browsers, when displaying long tables, would scroll data rows while keeping the header and subheader stationary, and when outputting them to a printer, they would be able to use the header and subheader as page footers. However, modern browsers do not do this and either simply display both as data rows or, at best, simply place the corresponding rows at the beginning and end of the table.

8. How to merge table cells

The colspan and rowspan attributes join table cells. The colspan attribute specifies the number of cells merged horizontally, and the rowspan attribute specifies the number of cells spanned vertically.


Rice. 3. An example of combining table cells horizontally using the colspan attribute

9. Attributes of table elements

Table 1. Attributes of table elements

Accepted values: list of cell names, separated by spaces; these names must be assigned to cells via their id attribute.
Accepted values: any positive integer.

Attribute	Description, accepted value
colspan	The number of cells in a row to merge horizontally.
headers	Specifies a list of header cells containing header information for the current data cell. Designed for speech browsers.	...	...
rowspan	The number of cells in the column to merge vertically.	Possible values: number from 1 to 999.
span	The default number of columns combined to define a single style is 1.

10. Example of creating a table


Rice. 4. Create a Restaurant Menu Using an HTML Table

Menu of the restaurant "Romashka"

Kitchen	Cold dishes		Hot dishes		Dessert
	Salads	Snacks	First meal	Second courses
Russian	The vinaigrette	Tongue with horseradish	Shchi with sauerkraut	Potato dumplings	Baked apples with honey
	Olivie	Beef jelly	Homemade rassolnik	Crucian carp baked in sour cream	Pancake pie
	Herring under a "fur coat"	Jellied pike perch	Meat hodgepodge	Cutlets "Pozharskie"	Cake "Potato"
Spanish	Scallop ceviche	Empanadas	Bread soup with garlic	Paella with seafood	Churros
	Avocado and tuna timbal	Ahotomate	Asturian fabada	Pork rakso	Almoixavena
	Beans with ham	Chanfaina	Fish soup with semolina dumplings	Potato tortilla	Bunuelos
French	Vosges salad	Chicken rillette	Eggplant cream soup "Renoir"	Potato ograten	Briochi
	Panzanella Salad	Cheese delicieuse	French pumpkin soup	Poultry gratin	Ligurian lemon pie
	Tartarus	Marinated salmon	Soup "Conti"	Tartiflette	Savarin "Triumph"

body ( margin: 0; background: #F4F1F8; ) ​​table ( border-collapse: collapse; line-height: 1.1; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: radial-gradient (farthest-corner at 50% 50%, white, #DCECF8); color: #0C213B; ) caption ( font-family: annabelle, cursive; font-weight: bold; font-size: 2em; padding: 10px; color: #F3CD26; text-shadow: 1px 1px 0 rgba(0,0,0,.3); ) caption:before, caption:after ( content: "\274B"; color: #A9E2CC; margin: 0 10px; ) th ( padding: 10px; border: 1px solid #A9E2CC; ) td ( font-size: 0.8em; padding: 5px 7px; border: 1px solid #A9E2CC; ) .first ( font-size: 1em; font-weight: bold; text-align: center; )

In an HTML table, each cell is delimited by a set of tags And, between which content is placed. If you don't add to the tag additional attributes or CSS styles, then each cell will by default occupy exactly one column.

To merge cells in HTML, you need to add fewer cells to a row than to other rows and add the colspan=" " attribute inside the tag cells that need to be stretched.

Let's look at a simple example of an HTML table with two rows and two columns (four cells). Its HTML code looks like this:

The cell in the top row now spans two columns. Because it takes up the space of two cells, there is only one td element in the first row.

You can merge HTML table cells in any area with any number of columns. One of the most useful uses of merging cells horizontally is to create table headers. If the table has n columns, place a colspan="n" attribute in the first cell of the top row and remove other cells from that row.

How to merge cells vertically in an HTML table: rowspan

If you want a cell to span multiple rows, you should add the rowspan=" " attribute inside the tag the cell that needs to be stretched vertically. In each row below the row where the stretched cell begins, you need to delete one cell so that the table is aligned. For example, when you stretch a cell across three rows, you need to delete one cell each in the next two rows.

Let's look at a simple example of an HTML table with four cells divided into two rows and two columns. HTML code:

To merge cells vertically in an HTML table, add the rowspan="2" attribute to the first cell in the top row, and then delete one of the cells in the bottom row. The HTML code will now look like this:

You can combine horizontal and vertical merging of cells in one table, as shown in the image on the left. A single cell can even span multiple rows and columns, as shown in the image to the right. The HTML code for each table is below:

Using vertically merged cells

Merging HTML cells vertically into one column can be used when you want to create a heading for a group of rows adjacent to that column. It can also help to separate groups of strings by type.

Now pay close attention as we move on to the most difficult topic of all when it comes to creating tables. We are talking about how to combine cells in an HTML table.

When you solve similar problems in some text editor, for example, the most common one is Word, it does almost everything itself, you just need to press the appropriate button. But if we talk about solving this problem in HTML, then everything is different here. And if you are attentive, the task will not seem so overwhelming.

Merging cells in rows

First of all, we will tell you how to combine rows in a table in HTML. The attribute will help with this colspan, which works with tags like And .

For example, you assign the value to this attribute 2 . As a result, the cell to which the tag belongs increases in the horizontal direction by exactly 2 times, displacing the neighboring one. But the displaced cell does not go anywhere, it is present in the table, only in a completely new column that needs to be removed.

Let's practice how this is done. So, let's begin. Let's try to create a table like this:

According to the rules described above, we need to create a row, add one simple cell, and then in the same row add a cell that will take the place of two simple cells.
In the next line we only need to add three simple cells. Sounds easy, let's put our thoughts into code:

That's all! No big deal at all!

Merging cells in columns

It is a little more difficult to combine cells in the vertical direction than in the horizontal direction. This problem is solved using the attribute rowspan, which is assigned to tags or .

If this attribute is set to 2 , then the cell increases in size vertically and extends to the next row. The cell below the one that grows in size goes to the right, which again creates an extra column. And to remove it, you just need to delete the cell.

Let's now create the following table:

Let's think about what we need to do. We need to add a cell that takes up 2 times more vertical space than a simple one. then add two simple cells on the same line.
Let's move on to the next line. Here we immediately have a space already occupied by the cell on top. Let's move on to the next section and see that all we have to do in this line is add two simple cells. Let's put it into code:

Again, nothing complicated.

Simultaneous joining vertically and horizontally in one table

In real situations, tables of this type are found very often. Try it yourself, using the reasoning we suggested, to create the following table using HTML code:

If it still doesn’t work, here’s the answer: