Hi all! So, now you know how to create elementary tables, consisting of as many rows and columns as necessary. 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	Upper right cell
Bottom left cell	Bottom right cell

Result in browser:

How to remove table borders

In turn, to remove the borders of the HTML table, or else you can say, 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 see how to use 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	Upper right cell
Bottom left cell	Bottom right cell

Result in browser:

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

Result in browser:

How to remove padding between cells in an HTML table

Agree that the boundary given with using CSS, has not such appearance as you would like. Undoubtedly, from the point of view of aesthetics, there is something to work on. 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 you use CSS- border property-collapse. In practice, it looks like this:

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

As a result, the distance between cells is removed:

The collapse value assigned to the border attribute allows you to remove double borders. As you can see, the result is a "collapse" of adjacent cell borders, as well as cell borders and the outer table border. As for the latter, it can be removed altogether. And if there is a need to display it, it is necessary 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!

So, we have studied with you the most simple actions that can be performed with table borders. And now the table looks much more aesthetically pleasing. However, the filling of the cells directly rests on the borders. This can be easily fixed by simply indenting the cells in the HTML table. And then the text inside the frame, in the cell, will be more readable.

To indent a cell, use the attribute cell padding for tag

. However, there is another, more preferred option: css.

In this case, the indents are set using the property padding. With its help, it will not be difficult to indent where necessary, that is, from above, to the right, from below or to the left, using, respectively, one of these properties: padding top, padding right, padding-bottom and padding-left.

You can set exactly how many pixels should be indented. Let's give an example in which the bottom indent will be 20 pixels, and all the rest will be 10 . Such css-code will look like this:

Td ( padding: 10px; padding-bottom: 20px; )

And the full style code at this stage:

Table ( border: solid 1px blue; border-collapse: collapse; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; )

Result in browser:

Padding between cells

As a rule, the tasks associated with creating tables can be solved using tags, attributes and properties for this, which allow you to create frames, indents in cells, and also set the color background of the cells themselves.

Indents in tables are not only inside cells. They may also be present between the cells themselves.

There are two options for indenting cells:

1. using attribute cellspacing for tag

.

using css-properties border-spacing.

It must be emphasized that border-spacing is written for the table as a whole, while the property padding is written directly to the cells.

Let's look at an example:

Table ( border: solid 1px blue; border-collapse: separate; border-spacing: 5px; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; )

And for the resulting result:

We will immediately stipulate that it is not necessary to try to make such indents using border-collapse: collapse. Indeed, when using this option, the cells “stick” to each other.

And to keep them separate from each other, you should use border-collapse: separate. It is important to understand that this value is the default value. And it is used only to visually show how this problem is solved. If we delete this line, then the result in the form of cells located separately from each other will be saved.

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

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

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

(“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 the 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).

) 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.

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 vertical alignment 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 table cells(header and data cells) we set a 1px solid border with hex color #F50 and set the padding to 19px on all sides.

For the first table with the class .first we set the gap between table cells (property border-spacing) equal 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 in the property border-spacing only one length value is specified, then it indicates the intervals, 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 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 property border-spacing 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, but using the property border-collapse with the collapse value 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 property border-spacing with value 0 and properties border-collapse with collapse value:

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 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 property border-collapse with the value 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 property is responsible for this behavior. empty-cells, 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	☺

Understand how a property works empty-cells from this example is very simple, if it is set to hide , then empty cells and background in them will be hidden, if set to show (default) then 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 header (above or below the table). Default property caption side is top , which places the title 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:

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 property value caption side default and 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. Property text-align used for horizontal alignment by analogy with any text information. We considered 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 property text-align. Consider Application keywords this property in the following example.

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 property text-align

The result of our example:

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

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:

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 property vertical-align, which was applied to this line.

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 the value 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:

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.

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.

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 table width to 100% of the width parent element, for header and data cells set a solid border with a width of 1px .
• Set for element

Tag	Description
. 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 Table indents 1 2 3 4 2 3 4 AT this example we: We placed the table in the center, using the method of centering horizontally with external indents ( margin: 0 auto ). For table name (tag

1	2	3	4	5

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 on 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.

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 the HTML element you can apply only one CSS property - the background color ( background color), but at the same time set the background color on hover (pseudo-class :hover) cannot be directly applied to this element. In this example, we'll look at how to highlight a table column using just CSS.

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 property border-collapse with meaning .
• And so, using pseudo-element ::after add content after each element on hover. Pseudo element ::after must be used together with the property content, 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 given edge of its ancestor, while the ancestor must have the value position different from 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 the property for our generated block top, which specifies the offset direction of the positioned element from the top edge, and the property bottom A that specifies the direction in which the positioned element is offset 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 in which positioned elements are arranged 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

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]

The tables themselves look rather "poor", besides, browsers display some characteristics of tables in their own way, in particular, frames. However, these shortcomings are easy to correct using the power of styles. At the same time, the tools for designing tables are greatly expanded, which allows you to successfully fit tables into the site design and present tabular data more clearly.

Cell background color

The background color of all table cells at the same time is set through the background property, which is applied to the TABLE selector. At the same time, you should remember the rules for using styles, in particular, the inheritance of element properties. Although the background property is not inherited, the default background value for cells is transparent , i.e. transparency, so the effect of filling the background is also obtained for the cells. If you specify a color for the selector TD or TH at the same time as TABLE, then this color will be set as the background of the cell (example 2.3).

Example 2.3. Background color

Heading 1	Heading 2
Cell 3	Cell 4

In this example, we get a blue background color for cells (tag ) and red at the title (tag ). This is because the style for the TH selector is not defined, so the background of the parent, in this case the TABLE selector, is "shown through". And the color for the TD selector is specified explicitly, so the cells are “filled” with blue.

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

Rice. 2.4. Changing the background color

Margins inside cells

The margin is the distance between the edge of the cell's content and its border. Usually, the cellpadding attribute of the tag is used for this purpose.

. It defines the margin value in pixels on all sides of the cell. You can use the padding style property by adding it to the TD selector, as shown in Example 2.4.

Example 2.4. Fields in tables

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Heading 1	Heading 2
Cell 3	Cell 4

In this example, by grouping selectors, the fields are set simultaneously for the selector TD and TH . The result of the example is shown in Fig. 2.5.

Rice. 2.5. Fields in cells

If the padding style property is applied to table cells, then the effect of the cellpadding attribute of the tag

ignored.

Distance between cells

To change the spacing between cells, use the cellspacing attribute of the tag

. The effect of this attribute is clearly visible when using borders around cells or when filling cells with a color that stands out against the background of the page. Cellspacing is replaced by the border-spacing style property, which sets the distance between cell borders. One value sets both the vertical and horizontal distance between cell borders. If this property has two values, then the first defines the horizontal distance (i.e., to the left and right of the cell), and the second determines the vertical (top and bottom).

The border-spacing property only has an effect if the TABLE selector does not have border-collapse set to collapse (Example 2-5).

Example 2.5. Distance between cell borders

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

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

Rice. 2.6. Table appearance when using border-spacing

Internet browser Explorer up to and including version 7 does not support the border-spacing property, so this browser will use the default cellspacing value for tables (usually 2px).

When you add a border-collapse property with a collapse value to the TABLE selector, the cellspacing attribute is ignored and the border-spacing value is set to zero.

Borders and Frames

By default, there is no border in the table initially, and it is added using the border attribute of the tag

. Browsers display such a border differently, so it's better not to specify this attribute at all, and to assign border drawing to styles. Let's look at two methods directly related to styles.

Using the cellspacing attribute

It is known that the cellspacing attribute of the tag

sets the distance between table cells. If you use a different background color for the table and cells, then a grid of lines will appear between the cells, the color of which matches the color of the table, and the thickness is equal to the value of the cellspacing attribute in pixels. Example 2.3 above shows this effect, so I won't repeat it.

Note that this is not a very convenient way to create borders, since it has a limited scope. This way you can get only a single-color grid, and not vertical or horizontal lines in the right places.

Applying the border property

The border style property simultaneously sets the color of the border, its style, and the width around the element. When you want to create separate lines on different sides, it is better to use derivatives - border-left , border-right , border-top and border-bottom , these properties respectively define the border on the left, right, top and bottom.

By applying the border property to the TABLE selector, we add a border around the table as a whole, and to the TD or TH selector, we add a border around the cells (Example 2-6).

Example 2.6. Adding a double border

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Heading 1	Heading 2
Cell 3	Cell 4

This example uses a black double border around the table itself and a solid white border around each cell. The result of the example is shown in Fig. 2.7.

Rice. 2.7. Border around table and cells

Note that double lines are formed where the cells join. They are obtained again due to the action of the cellspacing attribute of the tag

. Although this attribute does not appear anywhere in the example code, the browser uses it by default. If you set , then we get not double, but single lines, but of doubled thickness. To change this feature, apply the border-collapse style property with the value collapse , which is added to the TABLE selector (Example 2-7).

Example 2.7. Creating a Single Frame

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Heading 1	Heading 2
Cell 3	Cell 4

This example creates a solid green line between cells and a black line around the table. All borders within a table have the same thickness. The result of the example is shown in Fig. 2.8.

Rice. 2.8. Border around the table

Alignment of cell contents

By default, text in a table cell is left-aligned. The exception to this rule is the tag , it defines a heading that is center-aligned. To change the alignment method apply style text-align property(example 2.8).

Example 2.8. Align cell contents horizontally

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Heading 1	Cell 1	Cell 2
Heading 2	Cell 3	Cell 4

In this example, the content of the tag is left-aligned, and the contents of the tag - in the center. The result of the example is shown below (Figure 2.9).

Rice. 2.9. Aligning text in cells

Vertical alignment in a cell is always centered, unless otherwise specified. This is not always convenient, especially for tables whose cell contents vary in height. In this case, the alignment is set to the top edge of the cell using the vertical-align property, as shown in Example 2-9.

Example 2.9. Align cell contents vertically

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Heading 1	Heading 2
Cell 1	Cell 2

This example sets the header height like 40 pixels and text alignment is bottom. The result of the example is shown in Fig. 2.10.

Rice. 2.10. Aligning text in cells

Empty cells

Browsers differently display a cell that has nothing inside. “Nothing” in this case means that neither a picture nor text was added inside the cell, and the space is not taken into account. Naturally, the appearance of cells differs only if a border is set around them. When using an invisible border, the appearance of the cells, whether they have anything in them or not, is the same.

Older browsers did not display the background color of empty view cells , so in the case when it was required to leave the cell without content, but display the background color, an unseparated space () was added inside the cell. A space is not always appropriate, especially when you need to set the cell height to 1-2 pixels, which is why the one-pixel transparent drawing has become widespread. Indeed, such a picture can be scaled at your discretion, but it is not displayed on the web page.

Fortunately, the era of single-pixel drawings and all kinds of spacers based on them has passed. Browsers work quite correctly with tables without the presence of the contents of the cells.

To control the appearance of empty cells, the empty-cells property is used; when set to hide, the border and background in empty cells are not displayed. If all cells in a row are empty, then the entire row is hidden. A cell is considered empty in the following cases:

• there are no symbols at all;
• the cell contains only a newline, a tab character, or a space;
• the visibility value is set to hidden .

Adding a non-breaking space is treated as visible content, i.e. the cell will no longer be empty (example 2.10).

Example 2.10. Empty cells

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

The view of the table in the Safari browser is shown in fig. 2.11a. The same table in IE7 is shown in Fig. 2.11b.

a. In Safari, Firefox, Opera, IE8, IE9 browser

b. In IE7 browser

Rice. 2.11. Table view with empty cells