| Defines the contents of the table. |
|
| Specifies the name of the table. |
|
| Defines the header cell of a table. |
|---|
|
| Defines a table row. |
|
| Defines a table data cell. |
| Used to contain a group header in a table (table header). |
| |
Used to contain the "body" of the table. |
|
Used to contain the "footer" of the table (footer). |
|
| Defines the given column properties for each column within the tag .
|
|
| Defines a group of columns in a table. |
Working with indents in a table
Using padding in a table
Table indents
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
AT this example we:
- We placed the table in the center using the horizontal centering technique with outer margins (margin : 0 auto ).
- For table name (tag ) we set the bottom padding to 19 pixels. I hope you are not confused by uneven numbers :)
The result of our example:
Spacing between cells
After the above example, you may have noticed that we still have a gap between all the cells in the table. Let's look at how to remove the gap between the cells of the table, or increase it.
To set the distance between the borders of neighboring cells, you must use the CSS property - border-spacing .
Changing 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 return to it in this tutorial - "".
- In addition, we set the right margin of the tables 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.
- ) is bold.
- For the table cells (header and data cells), we set a 1 px solid border with hex color #F50 and set paddings of 19 px on all sides.
- For the first table with the 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 the 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 specifies the intervals, 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 neighboring cells can be specified in CSS units (px, cm, em, etc.). Negative values are not allowed.
The result of our example:
Show borders around table cells
You can say: - so, we removed the gap between cells using the border-spacing property with a value of 0 , but why do we now have cell borders that intersect?
Double borders are formed due to the fact that the bottom border of one cell is added to the top border of the cell below it, a similar situation occurs on the sides of the cells and this is logical in terms of table display, but fortunately there is a way to tell the browser that we we don't want to see such cheeky behavior of cell borders.
For this you need to use CSS property border-collapse . Oddly enough, using the border-collapse property with a value of collapse is the best way how can I remove the gap between cells and at the same time not get double borders between them.
Consider comparing the behavior of borders 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:
- We made our tables floating and shifted to the left (float : left ), set their outer right margin to 30px .
- Set for the table name (tag ) is bold.
- For the table cells (header and data cells) we set a 5 px solid border with hex color #F50 and set a fixed width of 50px and a height of 75px.
- For the first table with the 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
With 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, as you may have noticed from the previous examples, displays empty cells by default.
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 |
☺ | |
It is very easy to understand how the empty-cells property from this example works, if it is set to hide , then empty cells and the background in them will be hidden, if set to show (the default), they will be shown.
Table header location
Let's look at another simple property for table styling - 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 a header under the table, you need to use the property with the value bottom .
Let's look at an example of using this property:
An example of using the caption-side property
Title above the table
| Name | Price |
| Fish | 350 rubles |
| Meat | 250 rubles |
Title under the table
| Name | Price |
| Fish | 350 rubles |
| Meat | 250 rubles |
In this example, we have created two classes, which control the location of the table header. First grade ( .topCaption) puts the table header above it, we applied it to the first table and the second class ( .bottomCaption) puts the table header below it, we've applied it to the second table. Class .topCaption is set to the caption-side property by default 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 content alignment within header and data cells. The text-align property is used for horizontal alignment, similar to any text information. We considered the use of this property for text earlier in the article "".
To set the alignment for the content in cells, you need to use special keywords with the text-align property. Consider Application keywords 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 value (if the text direction is left to right). |
|
right | Aligns the cell text to the right. This is the default value (if the text direction is right to left). |
|
center | Aligns the cell text to the center. |
|
justify | Stretches the lines so that each line is the same width (stretches the cell's text to fit the width). |
In this example, we have created four classes, which set different horizontal alignments in the 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 apply:
*
- Sub , super , text-top , text-bottom , length , and % values applied to a table cell will behave as if using a baseline value.
Let's consider an example of use:
An example of vertical alignment in a table
|
Meaning | Description |
|
baseline | Aligns the baseline of the cell with the baseline of the parent. This is the default value. |
|
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 alignments in cells and applied them in order to table rows. The value in the cell matches the value of the vertical-align property that was applied to that row.
Algorithm for placing the table layout by the browser
CSS uses the browser's automatic table layout algorithm by default. In this case column width is set by the widest non-breaking content of the cell. This algorithm can be slow in some cases because the browser must read all the content in the table before determining its final layout.
To change the layout type of the table layout by the browser with automatic on the fixed, you must use the CSS property table-layout with a value of fixed .
In this case, the horizontal placement depends only on the width of the table and the width of the columns, not on the contents of the cells. The browser starts rendering the table as soon as the first row is received. As a result, the fixed algorithm allows you to create the layout of such a table faster than using the automatic option. When working with large tables, you can use a fixed algorithm to increase performance.
Let's look at the use 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
You and I have already partially touched on the methods of styling rows and columns of a table in the article "". In this article, we looked at using a group pseudo-class that allows you to interleave row styles in tables using values even (honest) and odd (odd), or by elementary mathematical formula.
Let's revisit the techniques we've covered so far 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 will consider 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:
- We set the width of the table to 100% of the width of the parent element, for the header and data cells we set a solid border 1px wide.
- Set for element (“footer” of the table) background color – coral, for element ("header" of the table) set the background color silver.
- For elements
, which are inside the element (table body) set background color to change on hover (pseudo-class :hover) c white per color khaki(the whole line is highlighted).
The result of our example: Rice. 153 Row styling example in tables The following example looks at applying corner rounding to table cells (property).
Cell corner rounding example
In this example, we:
- Centered the table with outer margins, set the width and height of the header cells to 50px , specified transparent border 5 pixels.
- Found that when you hover (pseudo-class :hover) on the header cell, it gets the background blue colors, Orange text color, border orange colors 5 pixels and rounding radius 100% .
- transparent border is necessary in order to reserve a place 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 concerns using HTML elements and and their styling.
Table column highlighting example
|
Application No. | 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:
And the final example, which is quite difficult to understand and requires advanced knowledge of CSS, as it touches on future topics planned for detailed study within this course.
In the previous example, we realized that HTML element you can apply only one CSS property - the background color (background-color), but at the same time you cannot set the background color on hover (pseudo-class :hover) on this element directly. In this example, we'll look at how to highlight a table column using just CSS.
An example of highlighting columns and rows of a table on hover
|
Application No. | 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 that our table occupies 100% of the parent element, the table cells occupy 25% of the parent element and have a solid border of 1 pixel green, the height of the header and data cells is 45px . We removed the gap between cells using the border-collapse property with the value
.
- And so, using the ::after pseudo-element we add content after each element
on hover. The ::after pseudo-element must be used along with the content property, thanks to which we insert a block-level element that has a background color forest green 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 set for the table relative positioning(relative ).
- We set the top property for our generated block, which specifies the offset direction of the positioned element from the top edge, and the bottom property, which specifies the offset direction of the positioned element from the bottom edge. Both properties were set to 0 , 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 we set for this block: z-index with a value of "-1" it determines the order of the positioned elements in 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 textbook " Positioning elements in CSS".
Questions and tasks on the topic
Before moving on to the next topic, complete the practical task:
 If you are having difficulty doing practical task, 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 comments and suggestions on the site to [email protected]
| |
|
