How to color a line in a css table. Selecting elements of a specific type by their index

We have looked at many methods for 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 help organize important information and make its presentation simpler.

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

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

(“footer” of the table) background color – coral, for element (“table header”) set the background color silver.

For 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 entire line is highlighted).

The result of our example:

Rice. 153 Example of styling rows in tables

The following example looks at applying corner rounding to table cells (property).

) we set the bottom padding to 19 pixels. I hope the uneven numbers don't bother you :)

The result of our example:

Space between cells

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

To set the distance between the borders of adjacent 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 for 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 consideration of this property in this article.

) – bold style.

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

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

Please note that if only one length value is specified in the border-spacing property, then it indicates 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 adjacent 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 space between the cells using the border-spacing property with a value of 0 , but why do our cell borders now intersect?

Double borders are caused by the fact that the bottom border of one cell is added to the top border of the cell that is below it, a similar situation occurs on the sides of cells and this is logical from a table display point of view, but fortunately there is a way to tell the browser that we We don’t want to see such loose 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 space between cells without getting double borders between them.

Let's compare 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 :

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 moved them to the left (float: left), set their outer margin on the right to 30px.
• Set the table name (tag

) – bold style.

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

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

The result of our example:

Behavior of empty cells

You can use CSS to set whether the borders and backgrounds of empty cells in a table should be displayed or not. This behavior is controlled by the empty-cells property, 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 (default), then they will be displayed.

Table header location

Let's look at another simple property for styling tables - caption-side , which sets the position of the table header (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 title under the table, you need to use the property with the value bottom .

Let's look at an example of using this property:

Header above table

Name	Price
Fish	350 rubles
Meat	250 rubles

Heading below the table

Name	Price
Fish	350 rubles
Meat	250 rubles

In this example we created two classes, which 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 the default caption-side property value and is 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 the alignment for content in cells, you must use special keywords with the text-align property. Let's look at the use of keywords for this property in the following example.

Meaning	Description
left	Aligns cell text to the left. This is the default value (if the text direction is left to right).
right	Aligns cell text to the right. This is the default value (if the text direction is right to left).
center	Aligns cell text to the center.
justify	Stretches the lines so that each line is the same width (stretches the cell's text to fit its width).

In this example we created four classes, which specify different horizontal alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to 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 applied:

* - Sub , super , text-top , text-bottom , length and % values ​​applied to a table cell will behave as if using the baseline value.

Let's look at an example of use:

Meaning	Description
baseline	Aligns the cell's baseline with the parent's baseline. This is the default value.
top	Aligns the contents of a cell vertically to the top edge.
middle	Aligns the contents of a cell vertically in the middle.
bottom	Aligns the contents of a cell vertically along the bottom edge.

In this example we created four classes, which specify different vertical alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to the value of the vertical-align property that was applied to that row.

Algorithm for placing a table layout in a browser

CSS by default uses an algorithm for the browser to automatically arrange the table layout. 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 contents in the table before determining its final layout.

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

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

Let's look at the use of this property using 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 on methods for styling table rows and columns in the article “”. In this article, we looked at using the group pseudo-class, which allows you to alternate row styles in tables using values even (honest) And odd (odd), or by elementary mathematical formula.

Let's review the techniques we covered earlier 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 look at 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:

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

Tag	Description
. Defines the contents of the table. Defines the name of the table. Defines the header cell of the table. Defines a table row. Defines a table data cell. 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. Defines specified column properties for each column within a tag Defines a group of columns in a table. Working with table indents Table indentation 1 2 3 4 2 3 4 In this example we: We placed the table in the center using the technique of horizontal centering with external indents (margin: 0 auto). For the table name (tag

1	2	3	4	5

In this example we:

• We centered the table with outer margins, set the width and height of the header cells to 50px, and specified transparent border 5 pixels.
• We established that when hovering (pseudo-class :hover) on the header cell, it receives a background blue colors, orange text color, border orange colors 5 pixels and rounding radius 100%.
• transparent border is necessary in order to reserve space for the border, which will be displayed when hovering; if this is not done, the table will “jump”.

The result of our example:

The following example covers the use of HTML elements And and their stylization.

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:

Well, 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 in this course.

In the previous example, we realized that the HTML element You can apply only one CSS property - background color (background-color), but you cannot directly set the background color when hovering (the :hover pseudo-class) on this element. In this example, we'll look at how to highlight a table column using only 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 our table to occupy 100% of the parent element, the table cells to occupy 25% of the parent element and have a solid 1 pixel green border, the height of the header and data cells is 45px. We removed the space between the cells using the border-collapse property with the value .
• And so, using the pseudo-element ::after we add content after each element on hover. The ::after pseudo-element is required to be 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, and the ancestor must have a position value other than the default - static , otherwise the counting 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 direction in which the positioned element is offset from the top edge, and the bottom property, which specifies the direction in which the positioned element is offset 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 according to Z axis. This property is necessary for the text to be in front of this block, and not behind it; if you do not set a value less than zero, the block will cover the text.

The result of our example:

If at this stage of your 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 practice assignment:

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

2016-2019 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]

Vlad Merzhevich

With a large number of rows in a table, it can be difficult to compare data from different columns with each other. This requires visually separating one table row from another, either by using lines or by adding a background color.

First, let's look at the option of using horizontal lines. In Fig. 1 shows one of the possible ways to focus attention on the rows of the table. Each line at the top and bottom is framed by a line, due to this the visitor’s gaze glides along them and does not jump to the next line. In this case, the data located in the columns is also linked to each other, but due to simultaneous left alignment and empty space between the columns.

Setting lines between lines is quite simple; to do this, add the border-bottom style property to the TD selector. If there is a border around the table, the bottom border will be double the thickness. In this case, you can remove the bottom line from the last row or hide the bottom border from the table (example 1).

Example 1: Separating table rows with lines

	2004	2005	2006
Rubies	43	51	79
Emeralds	28	34	48
Sapphires	29	57	36

In this example, vertical lines between header cells are added using the border style property, which is used for the TH selector. This creates a one-pixel blank space between the table border and the background header area.

The use of color expands the possibilities for changing the appearance of the table. For example, the background color of even and odd rows can be different, as shown in Fig. 2.

To change the background color of the required rows, we will introduce an additional class, call it even , and begin adding it to the even rows of the table, namely to the tag . Note that the TR selector can only set the background color via the background property. Any lines that are set for the TR selector will not be displayed. Therefore, we draw a lower border at the cell by applying the border-bottom property to the TD selector (example 2).

The background color of odd rows is determined by changing the color of the entire table. But since an individual color is set for selective rows (for which the class="even" parameter is added), it “overlaps” the background color of the table. Due to this, alternating colored lines are obtained.

Example 2. Highlighting table rows with color

	2004	2005	2006
Rubies	43	51	79
Emeralds	28	34	48
Sapphires	29	57	36
Amethysts	23	64	97

In this example, the double line at the bottom of the table does not result from applying the border-collapse property with the value collapse to the TABLE selector. This option detects the appearance of double lines where cells touch and replaces them with single lines. Please note that in different browsers there may be differences in the color of the lines left if the color of the border around the table does not match the color of the lines below the rows.

It became popular, web designers mainly used the table layout method and got very good results.

Tags used to build a table in html

table- a required tag that opens and closes the table
caption- optional tag indicating the table title
th- an optional tag, the opening and closing tags of which contain the column name. Typically appears bold
tr- a required tag that opens and closes the line
td- a required tag indicating the opening and closing of a cell in a row

Example code for a simple table

Table name

Stobets 1	Stobets 2
Text in first cell	Text in second cell

The browser will display

Purpose of tables in html

The lesson on tables is very important! Thanks to tables, you can arrange not only text, but also images, links and much more. In the table you can specify background(or its color), indentation, width, border And other parameters, which will give it a beautiful appearance. Table - Your first step to understanding web design! Previously, many sites were entirely laid out as tables, that is, everything that the user saw (side menu, top menu, content) was the content of the cells of a large table.
On that note, let's move directly to the attributes that make the table beautiful...

Properties and parameters of html tables: indentation, width, background color, border (frame)

U table tag there are the following attributes:

width- table width. can be in pixels or % of screen width.
bgcolor- background color of table cells
background- fills the table background with a pattern
border- frame and borders in the table. Thickness is indicated in pixels
cellpadding- padding in pixels between the cell contents and its internal border
As before, we write the attribute value in quotes.

Let's look at the use of these attributes using an example. To do this, let's create a table (but already without the extremely rarely used caption and th tags) and set the parameter to the attribute border, width (width of table, row or cell) And bgcolor (cell color)

As a result, the following table will be displayed in the browser:

frame- an attribute indicating the frame around the table. There are the following values:

Void - no frame,
above - only the top frame,
below - bottom frame only,
hsides - only the top and bottom frames,
vsides - only left and right frames,
lhs - left frame only,
rhs - right frame only,
box - all four parts of the frame.

rules- an attribute indicating the boundaries within the table, between cells. There are the following values:

None - there are no borders between cells,
groups - boundaries only between groups of rows and groups of columns (will be discussed a little later),
rows - boundaries between rows only,
cols - boundaries only between columns,
all - display all borders.

Let's look at the code example

Stobets 1	Stobets 2

Result

Now let's try to create a beautiful table. To do this, let's start using table alignment. To do this, there are the following already familiar parameters:

align- table alignment. It can be placed on the left (left), on the right (right), in the center (center)
cellspacing- distance between table cells. Specified in pixels (default 0 pixels)
cellpadding- padding in pixels between the cell contents and its internal border (default 0 pixels)
Let's look at an example

Stobets 1	Stobets 2
Text in the first cell of the first column	Text in the second cell of the second column

The browser will display a centered table that looks like this:

tr rows and td cells in HTML tables

Let me remind you again that tables are formed row by row (tr). The rows (tr) already contain cells (td). If you specify a parameter for a string (tr), it will be valid for all cells(td) in this line, if for a specific cell, then only for it. In the examples above, I specified the color for the row; this parameter was distributed accordingly to all cells.

For tr and td tags there are the following

align- alignment of text inside a cell. Left edge (left), right edge (right), center (center)
valign- vertical alignment of text inside a cell. Up (top), down (bottom), center (middle)
bgcolor- sets the color of the line
width- column width (all cells below will accept this parameter) is indicated in pixels or as a percentage, where 100% is the width of the entire table
height- cell height (all cells in the row will accept this parameter)

Let's look at the code where the contents of the cells (td) are aligned along different edges: in the first one to the left, in the second to the right:

Stobets 1	Stobets 2
Text in the first cell of the first column	Text in the second cell of the second column
Stobets 1	Stobets 2

Result

Using tables you can create a very good page. Don’t forget that you can insert not only text into cells, but also images, links, etc.!)

Thank you for your attention! I hope the material was useful!

From the author: CSS has selectors to find elements based on their position in the document tree. They are called index pseudo-classes because they look at the position of the element rather than its type, attributes, or ID. There are five of them in total.

:first-child and :last-child

As you might guess from the name, the :first-child and :last-child pseudo-classes select the first and last child in a node (element). As with other pseudo-classes, :first-child and :last-child have minimal side effects when using simple selectors.

Let's look at the HTML and CSS below:

List of fruits

• Apples
• Bananas
• Blueberries
• Oranges
• Strawberries

Stobets 1	Stobets 2
Text in the first cell of the first column	Text in the second cell of the second column

< ! DOCTYPE html > < html lang = "en-US" > < head > < meta charset = "utf-8" > < title >: first - child and : last - child< / title > < / head > < body > < h2 >List of fruits< / h2 > < ul > < li >Apples< / li > < li >Bananas< / li > < li >Blueberries< / li > < li >Oranges< / li > < li >Strawberries< / li > < / ul > < / body > < / html >

The screenshot below shows the result.

The h2 header and the first li are colored pink because:first-child is not tied to specific elements. The h2 tag is the first child of the body tag, and li is the first child of the ul element. But why are the remaining li elements green? Because:last-child is also not tied to a specific element, and ul is the last child element in the body tag. In fact, in the styles above we wrote *:first-child and *:last-child.

Adding a simple selector to :first-child and :last-child makes them more specific. Let's limit our selection to only list items. Replace :first-child with li:first-child and :last-child with li:last-child. The screenshot below shows the result.

:nth-child() and :nth-last-child()

It's not a bad idea to be able to select the first and last child elements in a document. What if you need to select even or odd elements? Maybe we need to select the sixth element in the tree, or apply styles to every third child element. The pseudo-classes:nth-child() and:nth-last-child() will help us here.

Like :not, :nth-child() and :nth-last-child() are also functional pseudo-classes. They take one argument, which must be:

keyword odd;

keyword even;

an integer value of type 2 or 8;

argument in the form An+B, where A is the step, B is the offset, and n is a positive integer variable.

The last argument is a little more complicated than the others. We'll look at it a little later.

What is the difference between :nth-child() and :nth-last-child()? They differ in the starting point: :nth-child() counts forward, and :nth-last-child() counts backward. CSS indexes use natural numbers and start at 1, not 0.

Using the pseudo-classes:nth-child() and:nth-last-child() it is convenient to create alternating patterns. The striped table is a perfect use case. The CSS below gives the even rows in the table a light bluish-gray background, the result can be seen in the screenshot below:

tr:nth-child(even) ( background: rgba(96, 125, 139, 0.1); )

tr : nth - child (even ) ( background: rgba(96, 125, 139, 0.1);

If you switch from:nth-child to:nth-last-child, the bars are inverted because the count starts from the bottom. See screenshot below.

Do you want something more complex, with more complex arguments? Let's create a document with 20 elements as shown below.

Using :nth-child() and :nth-last-child() you can select one specific element. You can select all child elements after a given position, or you can select elements with an offset multiple. Let's change the background of the sixth element:

Item:nth-child(6) ( background: #e91e63; )

Once again, A is step. This is a factor for n starting at 1. That is, if A = 3, then 3n will select the third, sixth, and ninth elements, and so on. This is exactly what can be seen in the screenshot below.

Here everything is a little more interesting. Using :nth-child() and :nth-last-child() you can select all elements after a given point. Let's select all elements except the first seven:

Item:nth-child(n+8) ( background: #e91e63; )

Item : nth - child (n + 8 ) ( background : #e91e63;

There is no step specified here. As a result, n+8 selects all elements of n, starting with the eighth one. See screenshot below.

Note: negative offset

Negative values ​​and ranges are also valid. An entry like:nth-child(-n+8) inverts the selection and selects the first eight elements.

Using offset and step, you can select every third element, starting with the fifth:

Item:nth-child(3n+5) ( background: #e91e63; )

Item : nth - child (3n + 5 ) ( background : #e91e63;

Result.

only-child

The only-child pseudo-class selects an element only if it is the only child element. Below are two bulleted lists. The first has one element, the second has three:

• Apple

• Orange
• Banana
• Raspberry

< ul > < li >Apple< / li > < / ul > < ul > < li >Orange< / li > < li >Banana< / li > < li >Raspberry< / li > < / ul >

The selector li:only-child(color: #9c27b0;) will select

Apple

, since it is the only child of the first list. The elements of the second list are not included in the selection, since there are three adjacent elements. The result is shown below.

:empty

You can use the :empty pseudo-class to select elements that have no children. The pseudo-class:empty speaks for itself (empty from the English “empty”). To be included in the:empty selection, the element must be completely empty, not even spaces. That is, it gets into the sample, but it doesn’t.

Sometimes WYSIWYG editors insert empty p tags into your content. You can use :empty and :not to prevent styles from being applied to these elements. For example, p:not(:empty).

Selecting elements of a specific type by their index

The pseudo-classes described in the previous section select elements if they occupy a certain position in the document tree. For example, p:nth-last-child(2) will select all p tags before the last one inside the parent block.

In this section, we will talk about typed index pseudo-classes. These pseudo-classes also select elements by index value, but the selection is limited to a specific type. For example, you need to select the fifth p tag or even h2 tags.

There are five such pseudo-classes, whose names are the exact opposite of their untyped counterparts:

nth-last-of-type()

There is a fine line between them and child index pseudo-classes. The entry p:nth-child(5) finds only the fifth tag p, while the entry p:nth-of-type(5) finds all tags p and selects the fifth one.

Let's create another document. It also has 20 elements, only some are p tags and others are divs. p tags with rounded corners, see screenshot below.

Don't you think that a black and white table looks a bit boring? That's what we think too! Therefore, in this tutorial we will talk about how to change the color of a table in HTML. There are three options for adding color, each with its own property.

1. Specifying the background color of cells. This is done using the property background-color.
2. Specifying the color of text in cells. This is done using the property color.
3. Specifies the color of the cell borders. This is done using the property border-color.

Previously, to change the color, a more concise form of describing the frame was used. She looked like this:

Border: 1px solid light gray

And the last part was responsible for the color here - lightrgay.

There are various ways to set the meaning of colors in CSS. We will show you how color is described using attributes.

How to change cell color

Let's see what the code looks like in CSS, which specifies the color for the cell.

Td ( background-color: background-color; )

Of course, you can also change colors table, and td, and th. Let's try to give our multiplication table a more solid look.

Let's add styles for header cells with the tag th, as well as for diagonal cells containing squares of numbers:

Multiplication table

*	2	3
2	4	6
3	6	9

Result in browser:

How to change the border color in a table

As you already noticed in the example above, in the table we changed the color of the border. For this we used the border property. It sets the parameters in the order listed below:

1. line type, in our case solid (solid)
2. line thickness, in our case 1px
3. line color, in our case blue

Let us recall once again what setting the border color for a cell looks like:

Td ( border: 1px solid blue; )

How to change the color of a row in a table

So, we have learned how to change the colors of cells, as well as header cells, using CSS capabilities. If we specify styles for tags like th or td, then you should understand that the styles will also apply to other tags.

However, there are situations when you need to change the color of a specific cell, or several cells, or the entire row. What to do in this case? Here you should use classes, as well as apply their styles. In practice it looks like this:

RowGreen ( background-color:green; )

And to change the color of certain lines using this class, you need to do the following:

Table with alternating colors in rows

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

And the result in the browser:

How to change the text color in a table

To change the text color in the table, use the property color. You can apply it to a variety of elements: table, tr, th, td. Depending on this, the color in the selected element will change. For example, for the entire table we will set the font color to green:

Table ( color: green; ... )

Similarly, you can change the color for individual cells. And this ends this lesson, don’t forget to do your homework. Bye everyone!