Distance between columns of the html table. Using the cellspacing attribute

We have already figured out with you that HTML tables have frameworkthough browsers don't show them by default. But that's not all, each table cell also has a border called cell border... But that's not all, using the special tag attributes

you can change the spacing between cells and from cells to the table border, as well as padding from the borders of cells to their contents.

HTML table frame, cell borders, spacing and padding.

So for frame creation HTML tables and the boundaries of its cells only one tag attribute is used

- border. The attribute value is non-negative integer numbers (zero by default), which means the size in pixels. But, attention, the size changes only at the border of the table, at the borders of the cells it is always unchanged.

...

For change distance between cells (their boundaries) and from cells to frame tables in tag

the cellspacing attribute is applied. Its values \u200b\u200bcan also only be numbers that measure distances in pixels.

...

To set internal padding from cell borders to their content needed in the tag

use the cellpadding attribute. And its values \u200b\u200bare numbers representing pixel dimensions.

...

Note that browsers set small (two pixels) values \u200b\u200bfor cellspacing and cellpadding by default, so to remove spacing altogether, set the attributes to zero (0).

Example of borders, borders and padding of HTML tables

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Table with only the border and cell borders set:

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Result in the browser

Table with changed indents and distances:

Naturally, it is not necessary to draw the frame and borders of the cells in the table in order to change the padding and spacing between cells.

According to HTML syntax, browsers add cellspacing and cellpadding values \u200b\u200bto the dimensions of the table and its cells. For example, if you set the cell width to 100 pixels and cellpadding \u003d "10" - browsers add 20 pixels to the width (10 each on the left and right) and it becomes 120 pixels. In general, you will figure it out along the way.

Deviation from the topic or how to remove padding at the edges of the page

Initially, all browsers set small margins at the edges of HTML pages, which are often unnecessary, so now you will learn how to remove them. In general, this information should be placed at the beginning of the textbook, but there it would hardly be useful to you.

At one time the tag there were four attributes that set the size of these margins for each side of the page: topmargin (top), rightmargin (right), bottommargin (bottom), and leftmargin (left). These attributes are now deprecated, so we will apply styles (CSS). So, there are several ways to change the spacing of the padding at the edges of the page, I will show you two, and you will learn about the third if you decide to learn CSS.

Method one. B tag specify the style attribute with the following values:

style \u003d "margin: 0"\u003e ... - removes indents from all sides of the HTML page at once.

style \u003d "margin: top right bottom left">... - adjusts the size of indents for each side clockwise. Typically, pixel dimensions are used, for example: style \u003d "margin: 5px 3px 4px 5px"\u003e ...

The second and more convenient way. In the tag

Homework.

In this lesson, I will not describe everything in detail either - only general points. For completeness, see the result of the example.

1. Create three tables, each with one row and three columns (s).
2. Place the Header or "header" of the page in the first table (not to be confused with the "header" of the HTML document), in the second - the left and right menus, as well as the main content (content), in the third - Footer or the "footer" of the page.
3. Let the width of the first and last column of each table be fixed.
4. Important. Use a tag just to create four horizontal menu buttons in the "header" of the page. In other cases, let the images be in the background, and in the second cells of the tables, only colors are generally used, and in the first and last table it is # 99FF99.
5. Let the page content text be aligned on both sides of the table cell and the title centered.
6. As for the spacing between table cells, as well as cell indents, think for yourself where you need to completely remove them, and where to increase them.

The CSS specification gives unlimited possibilities for table design. By default, the table and table cells do not have visible borders and backgrounds, and cells within the table are not adjacent to each other.

The width of table cells is determined by the width of their contents, so the width of the table columns can be different. The height of all cells in a row is the same and is determined by the height of the tallest cell.

Formatting tables

1. Table borders border

The table and cells inside it are displayed in the browser without visible borders by default. Table borders set by the border property:

Table (border-collapse: collapse; / * remove empty spaces between cells * / border: 1px solid gray; / * set an outer border of 1px gray for the table * /)

Header cell borders each column are set for the th element:

Th (border: 1px solid gray;)

Cell borders table bodies are set for the td element:

Td (border: 1px solid gray;)

The width of the borders of adjacent cells is not doubled, so you can set borders for the entire table in the following way:

Th, td (border: 1px solid gray;)

The outer border of the table can be selected by giving it an increased width:

Table (border: 3px solid gray;)

Borders can be set partially:

/ * set a 3px gray outer border for the table * / table (border-top: 3px solid gray;) / * set a 1px gray border for the table body cell * / td (border-bottom: 1px solid gray;)

You can read more about the border property.

2. How to set the width and height of the table

Default table width and height is determined by the contents of its cells. If no width is specified, it will be equal to the width of the widest row (row).

Table and Column Width set using the width property. If table (width: 100%;) is specified for a table, then the width of the table will be equal to the width of the container block in which it is located.

The width of the table and columns is usually specified in px or%, for example:

Table (width: 600px;) th (width: 20%;) td: first-child (width: 30%;)

Table height not set. The height of the rows tables can be manipulated by adding top and bottom padding to elements and ... Fixing the height using the height property is not recommended.

Th, td (padding: 10px 15px;)

3. How to set the background of the table

Default table background and the cells are transparent. If the page or block containing the table has a background, then it will shine through the table. If the background is set for both the table and the cells, then only the background of the cells will be visible in the places where the background of the table and cells overlap. The background for the table as a whole and its cells can be:
fill,
,
.

4. Table columns

The CSS table model is focused mainly on strings (rows) formed using a tag

... In practice, there are times when you need special column formatting, which is possible in the following ways:

using the tag

You can set the background for any number of columns;

using the table td: first-child, table td: last-child selector, you can style the first or last column of the table (excluding the first cell of the table header);

using the table selector td: nth-child (column selection rule), you can style any columns in the table.

You can read more about CSS selectors.

5. How to add a table title

You can add a title to the table using the tag , and with the caption-side property it can be placed in front of or below the table. The text-align property is used to horizontally align the title text. Inherited.

...

Table No. 1

Company	Q1	Q2	Q3	Q4

caption (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;) Figure: 2. An example of displaying the header under the table

6. How to remove the gap between cell frames

By default, the borders of table cells are separated by a small space. If we set border-collapse: collapse for the table, then the gap will be removed. The property is inherited.

Syntax

Table (border-collapse: collapse;)
Figure: 3. An example of tables with merging and split cell borders

7. How to increase the spacing between cell borders

Using the border-spacing property, you can change the distance between cell borders. This property applies to the table as a whole. Inherited.

Syntax

Table (border-collapse: separate; border-spacing: 10px 20px;) table (border-collapse: separate; border-spacing: 10px;)
Figure: 4. An example of tables with increased gaps between cell frames

8. How to hide empty table cells

The empty-cells property hides or shows empty cells. Only affects cells that do not contain any content. If a background is specified for a cell, and table (border-collapse: collapse;) is specified for a table, then the cell will not be hidden. Inherited.

Company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table (border: 1px solid # 69c; border-collapse: separate; empty-cells: hide;) th, td (border: 2px solid # 69c;) Figure: 5. An example of hiding an empty table cell

9. Layout table layout using the table-layout property

The layout of a table layout is determined by one of two approaches: fixed layout or automatic layout. Layout in this case means how the width of the table is distributed between the width of the cells. The property is not inherited.

Syntax

Table (table-layout: fixed;)

10. Best Table Layouts

1. Horizontal minimalism

Horizontal tables are tables in which text is read horizontally. Each entity is a separate line. You can style tables like this in a minimalist style by placing a two-pixel border under the th heading.

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: # 669; padding: 9px 8px; transition: .3s linear;) tr: hover td (color: # 6699ff;)

With a large number of rows, this design of tables makes them difficult to read. To solve this problem, you can add a one pixel border under all td elements.

Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; transition: .3s linear;) / * rest of the code - as in the example above * /

Adding a: hover effect to the tr element makes tables that are minimalist in style easier to read. When you hover the mouse over a cell, the rest of the cells in the same row are selected at the same time, which simplifies the process of keeping track of information if tables have multiple columns.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)

2. Vertical minimalism

Although such tables are rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects represented by a column. You can style them in a minimalist style by adding a space separating the columns.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- right: 30px solid #fff; border-left: 30px solid #fff; color: # 669; padding: 12px 2px;)

3. "Box" style

The most reliable style for decorating tables of all types is the so-called "box" style. It is enough to choose a good color scheme and then set the background color for all cells. Remember to emphasize the difference between lines by setting borders as separators.

Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)

The most difficult thing is to find the color scheme that will blend harmoniously with your site. If the site is loaded with graphics and design, then it will be quite difficult for you to use this style.

Table (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- left: 1px solid # 9baff1; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px ;)

4. Horizontal zebra

Zebra table looks pretty attractive and handy. The complementary background color can serve as a visual cue for people to read the table.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( background: # e8edff;)

5. Newspaper style

To achieve the so-called newspaper effect, you can apply borders to table elements and play with the cells inside. A light, minimal newspaper style might look like this: play with the color scheme, add borders, padding, different backgrounds, and a: hover effect on hovering over a line.

Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px dashed # 69c; padding: 12px 17px;) td (color: # 669; padding: 7px 17px; ) tr: hover td (background: #ccddff;)

Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff;) tr: hover td (background: # 99bcff;)

Table (border: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: uppercase; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px dashed # 6cf; padding: 10px 20px;)

6. Table background

If you're looking for a quick and unique way to style your table, choose an attractive image or photo related to the table's theme and set it as the background of the table.

Png ") 98% 86% no-repeat;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- top: 1px solid white; padding: 10px 12px; background: rgba (51, 51, 153, .2); transition: .3s;) tr: hover td (background: rgba (51, 51, 153, .1); )

Hello! So, now you are able to create elementary tables, consisting of as many rows and columns as you need. Not bad, not bad. Now let's talk about the design of these tables.

In the last lesson, tables were displayed without borders. And, you see, it looks so-so, you can't even call it a sign. To make table borders in HTML, add to the tag

attribute borderby giving it a value other than zero.

So let's create borders for the table. For example, for the one we already have:

Top left cell	Top right cell
Bottom left cell	Bottom right cell

Result in the browser:

How to remove table borders

In turn, to remove the borders of the HTML table, or you can also say to make them invisible, you need the attribute border set value 0 ... After these simple actions, the frame will be removed.

The attribute allows you to create but not manage borders. It only allows you to change their thickness.

Therefore, now we will talk about CSSwhose properties make it possible with bordercreate different borders, both inside each cell and outside, around the table as a whole.

Let's take a look at how to apply CSS to create the outer and inner borders of a table.
To do this, remove the border attribute from our table and add styles:

Top left cell	Top right cell
Bottom left cell	Bottom right cell

Result in the browser:

Now let's add borders for each cell. To do this, just add the styles:

Result in the browser:

How to remove padding between cells in HTML table

Agree that a border defined with CSS does not have the same appearance as you would like. Undoubtedly, from the point of view of aesthetics, there is work to do. On the browser page, you can see that by default it displays the borders of tables and cells separately. An example clearly demonstrates this.

However, it is quite possible to get rid of such borders, which are called double, if we use the border-collapse CSS property. In practice, it looks like this:

Table (border: solid 1px blue; border-collapse: collapse;) ...

As a result, the distance between the cells is removed:

The collapse value assigned to the border attribute removes double borders. As you can see, the result is a collapse of adjacent cell borders, as well as the cell borders and the outer border of the table. As for the latter, it can be removed altogether. And if there is a need to display it, you need to increase its width. Thus, we got rid of the separators in the table. In the next lesson, we'll talk about how you can set vertical and horizontal borders. Good luck to all!

We have considered many methods of styling elements on the page such as text information, links, images, headings, but all this is not enough yet. In my articles, I often use HTML elements such as tables, because in most cases they are help organize important information and make it easier to present.

In this article, I will introduce you to the intricacies of styling HTML tables, and you will learn new CSS properties designed to achieve these goals.

The hypertext markup language HTML has provided us with a large number of opportunities to bind CSS styles to ten unique tags designed to work with tables, I suggest repeating them before further study:

("Footer" of the table) background color - coral, for element (Table "header") set the background color silver.

For items

that are inside the element (table body) set background color change on hover (pseudo class: hover) c white per color khaki (the entire line is highlighted).

The result of our example:

Figure: 153 Example of Styling Rows in Tables

The following example shows how to apply corner rounding to table cells (property).

) we set the bottom padding to 19 pixels. I hope you are not confused by the uneven numbers :)

The result of our example:

Spacing between cells

After the above example, you may have noticed that we have a gap between all the table cells. Let's look at how to remove the gap between table cells, or increase it.

To set the distance between the borders of neighboring cells, you must use the CSS property - border-spacing.

border-spacing: 30px 10px;

1	2	3
2
3

border-spacing: 0;

1	2	3
2
3

border-spacing: 0.2em;

1	2	3
2
3

In this example, we:

• float: left). If you missed the topic of floating elements, then you can always return to it in this tutorial - "".
• In addition, we set the table padding on the right to 30px and set the vertical alignment of the tables (the top of the element is aligned with the top of the tallest element). We'll return to this property in detail in this article.

) - bold.

For the table cells (header and data cells), we set a 1 pixel solid border with # F50 hex color and set the padding to 19 pixels for all sides.

For the first table with class .first we set the spacing between table cells (border-spacing property) to 30px 10px for the second table with the class .second equal to zero, for the third table with class .third equal to 0.2em.

I draw your attention to the fact that if only one length value is specified in the border-spacing property, then it indicates the spacing, both horizontally and vertically, and if two length values \u200b\u200bare specified, then the first determines the horizontal distance, and the second vertical. The distance between the borders of adjacent cells can be specified in CSS units (px, cm, em, etc.). Negative values \u200b\u200bare not allowed.

The result of our example:

Display borders around table cells

You can say: - so, we removed the spacing between the cells using the border-spacing property with a value of 0, but why do we now have the borders of the cells intersecting?

Double borders are formed due to the fact that the lower border of one cell is added to the upper border of the cell that is below it, a similar situation occurs on the sides of the cells and this is logical from the point of view of displaying the table, but fortunately there is a way to tell the browser that we are we do not want to see such cheeky behavior of cell borders.

To do this, you need to use the border-collapse CSS property. Oddly enough, using the border-collapse property with the collapse value is the best way to remove the gap between cells and not get double borders between them.

Consider a comparison of border behavior when using the border-spacing property set to 0 and the border-collapse property set to collapse:

border-spacing: 0;

1	2	3
2
3

border-collapse: collapse;

1	2	3
2
3

In this example, we:

• We made our tables float and left-aligned (float: left), set their right padding to 30px.
• Set for the table name (tag

) - bold.

For the table cells (header and data cells), we set a 5px solid border with # F50 hex and set a fixed width of 50px and a height of 75px.

For the first table with class .first we set the spacing between table cells to zero (border-spacing: 0;), and for the second table with the class .second set the border-collapse property to collapse, which merges cell borders into one when possible.

The result of our example:

Behavior of empty cells

Using CSS, you can set whether to display borders and backgrounds for empty cells in a table or not. The empty-cells property is responsible for this behavior, which by default, as you may have noticed from the previous examples, displays empty cells.

Let's move on to an example:

empty-cells: show;

1	2	3
2		☺
3	☺

empty-cells: hide;

1	2	3
2		☺
3	☺

To understand how the empty-cells property works from this example is very simple, if it is set to hide, then empty cells and the background in them will be hidden, if set to show (by default), then they will be displayed.

Table header location

Let's take a look at another simple property for styling tables - caption-side, which sets the position of the table caption (above or below the table). By default, the caption-side property is set to top, which places the caption above the table. In order to place the title under the table, you need to use the property with the bottom value.

Let's see an example of using this property:

Heading above the table

Name	Price
A fish	350 rubles
Meat	250 rubles

Title below the table

Name	Price
A fish	350 rubles
Meat	250 rubles

In this example, we have created two classesthat control the position of the table header. First grade ( .topCaption) puts the table title above it, we applied it to the first table and the second class ( .bottomCaption) places the table title below it, we applied it to the second table. Class .topCaption has a default caption-side property and was created for demonstration purposes.

The result of our example:

Horizontal and vertical alignment

In most cases, when working with tables, you will need to adjust the alignment of the content within header and data cells. The text-align property is used for horizontal alignment similar to any text information. We discussed the use of this property for text earlier in the article "".

To set the alignment for the content in the cells, you must use special keywords with the text-align property. Let's consider the application of the keywords of this property in the following example.

Value	Description
left	Aligns the cell text to the left. This is the default (if the text direction is left to right).
right	Aligns the cell text to the right. This is the default (if the direction of the text is right to left).
center	Aligns the cell text to the center.
justify	Stretches lines so that each line has the same width (stretches the cell text to fit the width).

In this example, we have created four classesthat set different horizontal alignment in cells and apply them in order to the table rows. The value in the cell matches the value of the text-align property

The result of our example:

In addition to horizontal alignment, you can also define vertical alignment in table cells using the vertical-align property.

Please note that when working with table cells, only the following values \u200b\u200b* of this property are used:

* - The values \u200b\u200bsub, super, text-top, text-bottom, length and% applied to a table cell will behave as if using a baseline value.

Let's consider an example of use:

Value	Description
baseline	Aligns the baseline of the cell to the baseline of the parent. This is the default.
top	Aligns the contents of the cell vertically to the top.
middle	Aligns the contents of the cell vertically in the middle.
bottom	Aligns the contents of the cell vertically to the bottom.

In this example, we have created four classesthat set different vertical alignment in cells and apply them in order to the table rows. The value in the cell matches the value of the vertical-align property that was applied to that row.

Algorithm for placing table layout by browser

CSS uses the browser's automatic table layout algorithm by default. In this case the column width is set by the widest non-breaking cell content... This algorithm can be slow in some cases, as the browser must read all the contents in the table before determining its final layout.

To change the placement type of the table layout by the browser with automatic on the fixed, you must use the table-layout CSS property with the fixed value.

In this case, the horizontal placement depends only on from the width of the table and the width of the columns, and not from the contents of the cells. The browser starts displaying the table immediately after the first row is received. As a consequence, the fixed algorithm allows you to create the layout of such a table faster than using the automatic version. When working with large tables, you can use a fixed algorithm to improve performance.

Let's look at the application of this property with the following example:

table-layout: auto;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Wheat	125	215	2540	33287	695878	1222222	125840000	125

table-layout: fixed;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Wheat	125	215	2540	33287	695878	1222222	125840000	125

In this example, we:

Styling table rows and columns

We have already partially touched upon the methods of styling the rows and columns of the table in the article "". In this article, we looked at using a group pseudo-class that allows you to alternate row styles in tables using values even (even) and odd (odd), or by elementary mathematical formula.

Let's revisit the previous techniques and learn about new ways to style rows and columns in tables. Let's move on to examples.

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

In this example, we:

The result of our example:

Let's move on to the next example, in which we'll look at the options for styling table rows.

Service	The cost
Amount	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

In this example, we:

• We set the width of the table to 100% of the width of the parent element, and set a 1px solid border for the header and data cells.
• Installed for the item

Tag	Description
. Defines the contents of the table. Specifies the name of the table. Defines the header cell of the table. Defines a row in a table. Defines the data cell of the table. Used to contain the group header in the table (table header). Used to contain the "body" of the table. Used to contain the "footer" of the table (footer). Defines the specified column properties for each column within a tag Defines a group of columns in a table. Working with table indents Table indents 1 2 3 4 2 3 4 In this example, we: Placed the table in the center using the horizontal centering technique with outer padding (margin: 0 auto). For the name of the table (tag

1	2	3	4	5

In this example, we:

• Center the table with paddings, set the width and height of the header cells to 50px, specified transparent border 5 pixels.
• Found that when hovering (pseudo-class: hover) over the header cell, it gets the background blue colors, orange text color, border orange colors 5 pixels and a radius of 100%.
• Transparent border is necessary in order to reserve space for the border, which will be displayed on hover, if this is not done, the table will "jump".

The result of our example:

The following example touches on the use of HTML elements and and their styling.

Application number	Service	price, rub.	Total
1	Singing	6 000	6 000
2	the washing up	2 000	2 000
3	Cleaning	1 000	1 000
4	Nagging	1 500	1 500
5	Reading	3 000	3 000

In this example, we:

The result of our example:

Well, and the final example, which is quite difficult to understand and requires advanced knowledge in CSS, as it touches on future topics planned for detailed study within the framework of this course.

In the previous example, we realized that the HTML element you can apply only one CSS property, the background-color, but you cannot directly set the background color on hover (the: hover pseudo-class) on this element. In this example, we'll look at how to highlight a table column using only CSS.

Application number	Service	price, rub.	Total
1	Singing	6 000	6 000
2	the washing up	2 000	2 000
3	Cleaning	1 000	1 000
4	Nagging	1 500	1 500
5	Reading	3 000	3 000

In this example, we:

• We set our table to occupy 100% of the parent element, table cells occupy 25% of the parent element and have a solid 1 pixel green border, and the headers and data cells are 45px high. We removed the gap between the cells using the border-collapse property with the value .
• And so, using the :: after pseudo-element, add content after each element on hover. The :: after pseudo-element is necessarily used in conjunction with the content property, thanks to which we insert a block element that has a background color forestgreen and has absolute positioning.
• Absolute positioning here is necessary to offset the element relative to the specified edge of its ancestor, while the ancestor must have a position value other than the default static, otherwise the count will be relative to the specified edge of the browser window, for this reason we have set relative positioning (relative).
• We set for our generated block the top property, which indicates the direction of offset of the positioned element from the top edge, and the bottom property, which indicates the direction of offset of the positioned element from the bottom edge. For both properties, the value 0 was specified, so the block will completely occupy the element from the bottom and top of the table, the width of this block was set to 25%, this value corresponds to the width of the cell itself.
• And the final property that we set for this block: z-index with a value of "-1" it determines the order of the positioned elements by z axis... This property is necessary so that the text is in front of this block, and not behind it, if you do not set a value less than zero, then the block will close the text.

The result of our example:

If at this stage of the study you do not understand the process of positioning elements, then do not be discouraged, this is a difficult topic to understand, which we also did not consider, but we will definitely consider it in the next article of the tutorial "Positioning elements in CSS".

Questions and tasks on the topic

Complete the Practice Activity before moving on to the next topic:

If you have any difficulty in completing the practice, you can always open the example in a separate window and inspect the page to see what CSS was used.

2016-2020 Denis Bolshakov, you can send your comments and suggestions on the work of the site to the [email protected]