using the table td: first-child, table td: last-child selector, you can style the first or last column of the table (except for the first cell of the table header);
using the table td: nth-child selector (column selection rule), you can style any columns in the table.
You can read more about CSS selectors.
, and using 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;) 
Rice. 2. An example of displaying the header under the table 6. How to remove the gap between cell frames
The default table cell borders are separated by a small space. If you set border-collapse: collapse for the table, then the gap will be removed. The property is inherited.
Syntax
Table (border-collapse: collapse;)
Rice. 3. An example of tables with merging and split cell borders
7. How to increase the space 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;)
Rice. 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;) 
Rice. 5. An example of hiding an empty table cell 9. Layout of the 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;) / * the rest of the code is 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 highlighted 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 hardest part is finding 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 colors, 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 everyone! 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 border, giving it a value other than zero.
So let's make 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 CSS whose properties make it possible with border create 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:
Example table
| Top left cell |
Top right cell |
| Bottom left cell |
Bottom right cell |
Result in the browser:
Now let's add borders for each cell as well. To do this, just add the styles:
Result in the browser:
How to remove padding between cells in HTML table
Agree that the CSS border doesn't look the way you want it to look. 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 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. And in the next lesson we'll talk about how you can set vertical and horizontal borders. Good luck to all!
Tabular data- information that can be displayed in the form of a table and logically divided into columns and rows. HTML tag is used to display tabular data on web pages
, which is a container with the contents of the table. HTML table content is described line by line, each line begins with an opening tag and ends with a closing tag
.
Inside the tag
the table cells are located, represented by tags | or | ... It is the cells that contain all the table content displayed on the web page.
Table frame
By default, an HTML table on a web page is rendered without a border; to add a border to the table, as to all other elements, the border CSS property is used. But it should be noted that if you add a border only to the element , then it will be displayed around the entire table. In order for the table cells to also have a border, you will need to set the border property for the elements | and | . Table, th, td (border: 1px solid black;) Try it " Now both the table and cells have borders, while each cell and table has its own borders. As a result, an empty space appeared between the frames; the border-spacing property allows you to control the size of this space, which is set for the entire table. In other words, you cannot control the gaps between different cells individually.
Even if we remove the gaps between cells using the value 0 of the border-spacing property, then the borders of the cells will touch each other, doubling. The border-collapse property is used to merge cell borders. It can take two values:
- separate: is the default. The cells are displayed a short distance from each other, each cell has its own border.
- collapse: connects adjacent frames into one, all gaps between cells, as well as between cells and the table frame are ignored.
Document's name
| Name | Surname |
|---|
| Homer | the Simpson |
| Marge | the Simpson |
| Name | Surname |
|---|
| Homer | the Simpson |
| Marge | the Simpson |
Try " Table size
After adding frames to table cells, it became noticeable that the contents of the cells are too close to the edges. You can use the padding property to add white space between the edges of the cells and their contents: Th, td (padding: 7px;) Try it " The size of the table depends on its contents, but situations often arise when the table is too narrow and it becomes necessary to stretch it. The width and height of the table can be changed using the width and height properties, setting the desired dimensions either to the table itself or to the cells: Table (width: 70%;) th (height: 50px;) Try it " Text alignment
By default, text in table header cells is center-aligned, and text in normal cells is left-aligned, using the text-align property you can control the horizontal alignment of text.
The vertical-align CSS property allows you to control the vertical alignment of text content. By default, text is vertically aligned to the center of the cells. Vertical alignment can be overridden with one of the values for the vertical-align property:
- top: text is aligned to the top of the cell
- middle: aligns the text to the center (default)
- bottom: text is aligned to the bottom of the cell
Document's name
| Name | Surname |
|---|
| Homer | the Simpson |
| Marge | the Simpson |
Try " Alternating the background color of table rows
When looking at large tables containing many rows with a lot of information, it can be difficult to keep track of which data belongs to a particular row. To help users navigate, you can use two different background colors alternately. To create the described effect, you can use the class selector, adding it to every second row of the table:
Document's name
| Name | Surname | Position |
|---|
| Homer | the Simpson | father |
| Marge | the Simpson | mother |
| Bart | the Simpson | a son |
| Lisa | the Simpson | daughter |
Try "Adding a class attribute to every second line is a tedious task. The: nth-child pseudo-class has been added to CSS3 to address this issue in an alternative way. Now the effect of interleaving can be achieved exclusively using CSS, without resorting to changing the HTML markup of the document. With the pseudo-class: nth-child, you can select all odd or even rows in a table using one of the keywords even (even) or odd (odd): Tr: nth-child (odd) (background-color: # EAF2D3;) Try it " Change line background on hover
Another way to improve the readability of tabular data is to change the background color of a row when you hover over it. This will help highlight the desired table content and enhance the visual perception of the data.
Implementing this effect is very simple, for this you need to add the: hover pseudo-class to the table row selector and set the desired background color: Tr: hover (background-color: # E0E0FF;) Try it " Center alignment of the table
Aligning an HTML table to the center is possible only if the width of the table is less than the width of its parent element. To align the table in the center, you need to use the margin property, setting it at least two values: the first value will be responsible for the outer margin of the table at the top and bottom, and the second for automatic center alignment: Table (margin: 10px auto;) Try it " If you need different margins at the top and bottom of the table, you can set the margin property to three values: the first will be responsible for the top margin, the second for horizontal alignment, and the third for the bottom margin: Table (margin: 10px auto 30px;)
We have considered many methods of styling elements on a 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:
| 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 heading in the table (table heading). |
| |
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
Using padding in a table
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 margins (margin: 0 auto).
- For the name of the table (tag ) 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 cells in the table. Let's look at how to remove the gap between table cells, or increase it.
To set the distance between the borders of adjacent cells, you must use the CSS property - border-spacing.
Change the spacing between tables
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 come back 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 will return to a detailed discussion of this property in this article.
- ) - bold.
- For the table cells (header and data cells), we set a 1-pixel solid border with # F50 hex 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 are 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 are 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 don't want to see such cheeky behavior of cell borders.
To do this, you need to use the CSS border-collapse property. Oddly enough, using the border-collapse property with the collapse value is the best way to remove the gap between cells without getting double borders between them.
Consider a comparison of border behavior when using the border-spacing property with a value of 0 and the border-collapse property with a value of collapse:
Example of displaying borders around table cells
border-spacing: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-collapse: collapse;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
In this example, 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:
Empty cell behavior
Using CSS, you can set whether to display the borders and background of empty cells in the 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:
Example of displaying empty table cells
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 (the 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 take a look at an example of using this property:
Example of using the caption-side 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 classes that 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 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 alignment for content in cells, you need to use special keywords with the text-align property. Let's consider the application of the keywords of this property in the following example.
Example of horizontal alignment in a table
|
Meaning | 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 text direction 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 classes, which set different horizontal alignment in cells and applied them in order to the rows of the table. 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 * of this property are used:
*
- The values sub, super, text-top, text-bottom, length and% applied to the table cell will behave as if using the baseline value.
Let's look at an example of use:
Example of vertical alignment in a table
|
Meaning | 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 classes, which set different vertical alignment in cells and applied them in order to the rows of the table. The value in the cell matches the value of the vertical-align property that was applied to that row.
Algorithm for placing the layout of the table by the 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 content of the cell... 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 layout type of the table by the browser with automatic on fixed, you must use the table-layout CSS property set to fixed.
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:
An example of using the table-layout property
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 the use of a group pseudo-class that allows you to alternate row styles in tables using values even (honest) and odd (odd), or by elementary mathematical formula.
Let's revisit the previous techniques and explore new ways to style rows and columns in tables. Let's move on to examples.
An example of using the: nth-child pseudo-class with tables
|
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.
An example of styling rows in tables
|
Service | Price |
|
Sum |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
In this example, we:
- Set the width of the table to 100% of the width of the parent element, set the header and data cells to a 1px solid border.
- Installed for the item ("Footer" of the table) background color - coral, for element ("Header" of the table) 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: Rice. 153 Example of Styling Rows in Tables The following example shows how to apply corner rounding to table cells (property).
Example of rounding the corners of a cell
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.
Example of highlighting table columns
|
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 rather difficult to understand and requires advanced knowledge in CSS, since 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 will look at how to highlight a table column using only CSS.
An example of highlighting columns and rows of a table on hover
|
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, the table cells occupy 25% of the parent element and have a 1 pixel green solid border, 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 for the table 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 value of 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 are having difficulty 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]
| |
|
| |
