Indentation in css table. Margins within cells

Hello. The table as an element has its own characteristics that greatly distinguish it from the more familiar to many blocks. Today I would like to talk about how the distance between table cells is written in css.

Differences with the block model

To set the distance between blocks, external padding is usually used, but this does not work in the case of cells. Cells can be padded internally, but not externally.

This seems to be a small disaster, but by default the cells in the table are not located end-to-end, but with small indents, which are not always needed. How to remove them?

The border-spacing property

The property comes to the rescue, which is used in css specifically for tabular data - border-spacing. As the name suggests, it defines the free space (padding) from each cell.

An important point: the entire table needs to set border-spacing. That is, like this:

Table (
Border-spacing: 0;
}

With this rule, we remove the distance between the cells and now they are tightly pressed against each other. Accordingly, in pixels, you can set this distance, if necessary.

It might be a little unusual for a property to be set on a table selector, but that's a table-specific feature, you just need to remember it. The property will not work if the table is also set to border-collapse: collapse. In this case, the padding of the cells is automatically removed, and there is no need for border-spacing.

Deprecated way to set padding of cells

Previously for this to the tag

added the cellspacing attribute, which defined the padding, but today this is not recommended. This is cluttering up the code and is not up to modern web development standards.

The point is that padding refers to the appearance of an element, and html is completely unsuitable for this case. It is certain by the standards that css should be responsible for this.

As you can see, in css, the distance between table cells can be removed altogether, or you can control it using the property border-spacing... That's all for today. If you are interested in the topic of site building, subscribe to keep abreast of new materials on the site.

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 "head") 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 look at 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 only apply 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 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 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]

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 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;) 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 table width 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 of 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); )

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

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, remember the rules for using styles, in particular, inheritance of properties of elements. Although the background property is not inherited, the default background value for cells is transparent, i.e. transparency, so the background fill effect is obtained for the cells as well. If at the same time with TABLE you set the color for the selector TD or TH, 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 will get a blue background color for the 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 "skimmed through". And the color for the selector TD is specified explicitly, so the cells are “filled” with blue.

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

Figure: 2.4. Change background color

Margins within cells

The margin is the distance between the edge of the cell 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. It is allowed to 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, using the grouping selectors, the fields are set simultaneously for the TD and TH selector. The example result is shown in Fig. 2.5.

Figure: 2.5. Fields in cells

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

ignored.

Distance between cells

To change the spacing between cells, apply 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 from the background of the page. The border-spacing style property acts as a replacement for cellspacing, it sets the distance between the borders of cells. 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 defines the vertical distance (top and bottom).

The border-spacing property is effective only if the border-collapse property is not set for the TABLE selector with the collapse value (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.

Figure: 2.6. Table view when using border-spacing

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

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

Borders and frames

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

... Browsers display such a border in different ways, so it's better not to specify this attribute at all, and leave the drawing of the borders to styles. Let's look at two methods that are directly related to styles.

Using the cellspacing attribute

The cellspacing attribute of the tag is known to be

sets the distance between table cells. If a different background color of the table and the cells is used, 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 will not 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 one-color grid, not vertical or horizontal lines in the right places.

Applying the border property

The border style property simultaneously sets the border color, style and thickness around the element. When you need 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 to 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 double black border around the table itself and a solid white border around each cell. The example result is shown in Fig. 2.7.

Figure: 2.7. Border around table and cells

Please note that double lines are formed in the place where the cells are joined. 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 ask , then we get not double, but single lines, but doubled thickness. To change this feature, use the border-collapse style property with the collapse value, 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 the cells and a black solid line around the table. All borders within the table have the same thickness. The example result is shown in Fig. 2.8.

Figure: 2.8. Border around the table

Aligning the contents of cells

By default, text in a table cell is left-aligned. An exception to this rule is the tag , it defines a heading in which the alignment is centered. To change the alignment, use the text-align style property (example 2.8).

Example 2.8. Aligning the contents of cells 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 content of the tag - in the center. The result of the example is shown below (Fig. 2.9).

Figure: 2.9. Align text in cells

Vertical alignment in a cell is always centered, unless otherwise noted. This is not always convenient, especially for tables in which the contents of the cells differ 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. Aligning the contents of cells 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 as 40 pixels and the text is aligned to the bottom. The example result is shown in Fig. 2.10.

Figure: 2.10. Align text in cells

Empty cells

Browsers display a cell differently with nothing inside. “Nothing” in this case means that no picture or text was added to the cell, and the space is not taken into account. Naturally, the appearance of the cells differs only if a border is established around them. When using an invisible border, the appearance of the cells, whether there is something in them or not, is the same.

Older browsers did not display the background color of blank view cells , therefore, in the case when it was required to leave the cell without content, but display the background color, a non-separable space () was added inside the cell. Space is not always suitable, especially when you need to set the cell height to 1–2 pixels, which is why single-pixel transparent images are widely used. Indeed, such a picture can be scaled at your discretion, but it is not displayed on the web page in any way.

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

The empty-cells property is used to control the appearance of empty cells; 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 line feed, tab character or space;
• visibility is set to hidden.

Adding a non-breaking space is perceived 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 table view in the Safari browser is shown in Fig. 2.11a. The same table in the IE7 browser is shown in Fig. 2.11b.

and. In the browser Safari, Firefox, Opera, IE8, IE9

b. In IE7 browser

Figure: 2.11. Table view with blank cells