Beautiful frames for html table. Change line background on hover

- 4.7 out of 5 based on 6 votes

When creating web pages, it is very often necessary to present some page content in the form of tables.

Sometimes tables are used to create page structure. This approach is not entirely correct, because tables were not originally designed to position page elements.

It is best to use CSS for this purpose. But in some cases, tables are irreplaceable and convenient for providing information.

The tag is responsible for creating tables in HTML.

and the closing tag
... But you probably already know that tables are made up of rows and cells. Therefore, in order to create a table, we need two more tags: this is a tag which is responsible for creating strings, and the tag, responsible for creating cells.

In order to see how everything works in practice, let's create a table consisting of two rows and four cells. Our table code will be as follows:

1 - cell 2 - cell
3 - cell 4 - cell

In order to see what will come of it, create an html page using the code below. If you don't know how to create an HTML page, see the tutorial.

Table

1 - cell 2 - cell
3 - cell 4 - cell

You should have something like this:

As you can see, our table doesn't look like a table at all. This is all because our tags

and have many attributes that need to be specified in order for our table to have a border, background, dimensions, etc.

First, we will look at the attributes that are inherent in tags

... In order to see how our table will change, you can add these attributes to tags
and, refreshing the page, watch how the table will look in the browser. For convenience, I will not provide the entire code of the page, but only the code relating to the tag that is, what we will change.

And so the tag

has the following attributes:

border - sets the width of the table border in pixels, written like this:

.

bordercolor - the color of the table border, this attribute is not supported by all browsers, so you may not see the specified border color:

We set the border width to 2 pixels, blue, the table will look like this:

width - sets the width of the table in pixels or percent:

height - the height of the table in pixels or percent:

The table will be 250 pixels wide and 150 pixels high, the table will look like this:

align - table alignment;

align \u003d left - tables will be aligned to the left;

align \u003d right - the table will be right-aligned:

Our table should be right-aligned.

bgcolor - table background color, bgcolor \u003d # FFC000 - table background color will be yellow:

The table will look like this:

background - using this attribute, you can set an image that will be the background of the table.

As an example, save the small image that you see in brackets () to the folder where you have the page with the table, and to the tag

add background \u003d "fon.gif" all the code:

The table will look like this:

cellpadding is an attribute that sets the left, right, top and bottom padding within a cell. For example, if our tag

add cellpadding \u003d 10, then the text written inside the cells will be indented.

cellspacing - sets the spacing between table cells.

If you take a closer look at our table, you will see that there is a small space between the cell frames, this is the indent between the cells, it is set by default. To remove it, it is enough in the tag

prescribe cellspacing \u003d 0. All code:

As a result, our cells were pressed together, and the text inside the cells was indented:

hspace - sets the gap from the table to the left and to the right in pixels, written as follows: hspace \u003d 20

nowrap - prohibits word wrap in a cell, just nowrap is written

The last two attributes are rarely used, so I am not showing an example code with them.

Now let's look at the attributes of the tag

some of them are the same as tag attributes

width - the width of the cell in pixels or percentage.

height - the height of the cell in pixels or percent.

For example, let's set the width of the first cell in the first row to 30% - width \u003d 30%, and the height of the first cell in the second row to 100px. The code will be like this:

1 - cell 2 - cell
3 - cell 4 - cell

Note that it is enough to set one cell height or width and all cells in this row or column will take the same size. Therefore, if you need to set, for example, a certain cell height, then it is enough to specify this parameter for one cell and all other cells in the row will become the same.

align - aligns the contents of cells, has the following values:

align \u003d "lef" - the contents of the cell will be aligned to the left;

align \u003d "right" - content will be right aligned;

align \u003d "center" - the content will be aligned to the center of the cell.

Let's add these attributes and values \u200b\u200bto our code and align the contents of the 1st cell to the left (the contents are left-aligned by default, but in some cases this attribute is necessary), the contents of the 2nd cell are right-aligned, and the 4th in the center.

1 - cell 2 - cell
3 - cell 4 - cell

bgcolor - using this attribute, you can set the color of the cell.

background - sets the image as the background of the cell.

We have already met with these attributes, considering the attributes of the tag

... They work the same way, only in this case they set the background of the cell. For example, let's set the background color of the 2nd cell to yellow, and set the following image () as the background of the 4th cell.

To do this, add the necessary attributes to our code, for our cells bgcolor \u003d "# FFFF00" for the 2nd cell and background \u003d "fon.jpg" for the 4th cell. As a result, our table will look like this:

As you can see, despite the fact that we set the background of the table itself, if we set the background of the table cells, then the background that we set for the cells will be displayed.

bordercolor - sets the color of the cell border.

We also met this attribute when considering the attributes of the tag

... Let me remind you that it does not work in all browsers. Note that the tag

This example uses nested tables, that is, one table within another. In line 1 we open the first table and fill it with a dark color, in this case black (# 00 00 00). One of the parameters of the outer table is cellspacingor cellpadding - should be 0 and the other 1. In line 4 we open a new table with a white background (# FF FF FF). An important parameter of the nested table is its width - width \u003d "100%"... Tables should be closed in reverse order - first nested, then outer.

The above option can be used to create a frame for the entire page, but it should be borne in mind that it is not suitable for pages with a large amount of information, since the browser must read it to the end before showing the contents of the table. Thus, the visitor will see a blank screen for several seconds.

Box 2

In this example, we are dealing with one table. To create a frame, a specially designed parameter is used here border, which is assigned the value 1. At the same time, the parameter cellspacingequals 0, otherwise the frame will look like this:

there is no border attribute denoting the cell border. Let's set the border color of the 2nd cell to red for this, add the bordercolor \u003d "# FF0000" attribute to the second cell

There is one more attribute designed to align the contents of cells:

valign - it aligns the contents of the cells vertically.

Has the following meanings:

valign \u003d "top" - align the contents of the cell to the top;

valign \u003d "bottom" - alignment of the contents of the cell to the bottom;

valign \u003d "middle" - alignment in the middle of the cell;

valign \u003d "baseline" - alignment of the cell content to the baseline.

Let's add these attributes to each of our 4 cells.

1 - cell 2 - cell
3 - cell 4 - cell

Our table will look like this:

The last thing we need to consider in this tutorial is the concatenation of table cells. In order to combine several cells in a string, there is an attribute colspan \u003d "" where the quotes indicate the number of cells to be combined.

Don't you think that a black and white table looks boring? So we think so! Therefore, in this tutorial, we will talk about how to change the color of a table in HTML. There are three possibilities for adding color, each of which has its own property.

  1. Specifies the background color of the cells. Done using the property background-color.
  2. Specifies the color of text in cells. Done using the property color.
  3. Specifies the color of the cell borders. Done using the property border-color.

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

Border: 1px solid lightgray

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 the description of color using attributes occurs.

How to change cell color

Let's see what the code looks like in CSSin which the color for the cell is set.

Td (background-color: background-color;)

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

Add styles for the header cells with the tag th, as well as for cells along the diagonal, in which the squares of numbers are located:

Multiplication table

Multiplication table
* 2 3
2 4 6
3 6 9

Result in the browser:

How to change the border color in a table

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

  1. line type, in our case solid
  2. line width, in our case 1px
  3. line color, in our case blue

Let us recall 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, you and I have learned how to change the colors of cells, as well as header cells, using the capabilities of CSS. If we provide styles for tags such as th or td, then you must understand that the styles will apply to the rest of the tags.

However, there are situations when you need to change the color of a particular cell, or several cells, or the entire row. What to do in this case? Classes should be used here, as well as their styles should be applied. In practice, it looks like this:

RowGreen (background-color: green;)

And to change the color using this class, certain lines 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 color of text in a table

In order to change the color of the text in the table, use the property color... It can be applied to a wide variety of elements: table, tr, th, td. Depending on this, the color in the selected element will be changed. For example, set the font color to green for the entire table:

Table (color: green; ...)

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

With tables, you can achieve very interesting visual effects while creating thin frames that are almost equally interpreted by all browsers. Let's look at a few examples for this.

Box 1

parameter cellspacing= 1

parameter cellspacing= 2

parameter cellspacing= 3

This option is simpler than the first, but, unfortunately, it is not interpreted in the same way by Internet Explorer and Netscape.

Box 3
















<table border \u003d "0" cellspacing \u003d "0" cellpadding \u003d "0"\u003e










This is how it looks









If the two previous options display frames in different browsers, albeit minimally, but of different thicknesses, then the third example is interpreted by the common browsers Internet Explorer 4.x / 5.x / 6, Netscape 4.x / 6.x and Opera 6. x is the same in terms of border thickness. I find it appropriate to mention that Netscape 4.x is the most problematic for a web designer.
But let's take a closer look at the third option. It is based on a table of 9 cells, presented below:

1

2

3

4

6

7

8

9

All cells, except for the 5th one, are painted over in black, the fifth - in white. The background of the table itself is not important in this case. Then the parameter is added to cells 1-3 and 7-9 height \u003d "1". Accordingly, cells 1, 3, 4, 6, 7, 9 are made one pixel wide ( width \u003d "1"). Middle cells 2, 5, 8 are made as wide as possible ( width \u003d "100%"). The trick is that the so-called "modified Malevich square" is added to the cells, which should be narrow or thin, or both, - a transparent gif file of 1x1 size, otherwise the desired effect will not be achieved.

This option is undoubtedly too complex and cumbersome to create a thin border around a table with one cell, despite its compatibility with many browsers. It is mainly used for page layout with thin lines. You can also use style sheets to create frames, but more on that in one of the following workshops.

Next workshop

\u003e\u003e preparing for publication

Previous workshop

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 with 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 width of the table is distributed between the width of the cells. The property is not inherited.

Syntax

Table (table-layout: fixed;)

10. Best Table Layouts

1. Horizontal minimalism

Horizontal tables are tables in which text is read horizontally. Each entity is a separate line. You can style tables like this in a minimalist style by placing a two-pixel border under the th heading.

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin tan$150-Annie
Joyce ming$200$35Andy
James A. Pentel$175$25Annie
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;) / * rest of the code - as in the example above * /

Adding a: hover effect to the tr element makes tables that are minimalist in style easier to read. When you hover the mouse over a cell, the rest of the cells in the same row are 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); )

To clearly separate the content of one cell from another, borders are added to the cells. The border parameter of the tag is responsible for their creation.

which determines the thickness of the frame.

Example 1 shows how to create a border around cells.

Example 1. Adding a frame to a table





Border thickness







Cheburashka Crocodile Gena Shapoklyak


Frames created in this way differ slightly in their appearance in different browsers.

Figure: 1. The frame obtained using the border parameter

To get a border of the same type, it is recommended to apply the border style tag, applying it to the table cells (the or ). However, here too there are pitfalls. Since a frame is created for each cell, a border of double thickness is obtained at the points of contact of the cells. There are several ways to solve this feature. The easiest is to use the border-collapse property set to collapse. His task is to track the contact of lines and, instead of a double border, depict a single one. We add this attribute of the datatkov to the tag

, and then he will do everything on his own (example 2).

Example 2. Using border-collapse to create table borders





Frame creation






0XX
00X
XX0


The difference between the table borders when adding the border-collapse parameter, as well as without it, is shown in Fig. 2.

a

b

Figure: 2. Table view when using the border-collapase attribute

In fig. 2a shows the default table frame. Note that within the table, all lines are double the width. Adding the border-collapse parameter removes this feature, and the thickness of all lines becomes the same (Fig. 2b).

To develop lines of the same type within the table, you can go the other way. Should be added for the selector frame, but cancel the right and bottom line by setting the corresponding attributes to none. Then, when the cells are joined, their borders will not overlap with each other, for the reason that there will be only one line. However, with this method of forming borders, there are no lines at the bottom and right of the table itself. Adding border-right and border-bottom parameters to the selector

, we will end up with the desired frame (example 3). For consistency, care should be taken to match the style, thickness and color of the border in all cases.

Example 3. Creating a border for a table using the border attribute





Frame creation






0XX
00X
XX0


This method can have variations, for example, for the selector we add a border only to the right and bottom, and at

on the contrary, we add a border attribute, but remove the line to the right and bottom. In any case, the presented result will be one.

A simple and original look of the table can be obtained by making the border color match the background color. But for the lines to be visible, it is imperative to fill the background of the tag

or ... Then the table cells are obtained, as if cut by a cutter between themselves (example 4).

Example 4. Using invisible borders in a table





Creating boundaries







0XX
00X
XX0


In this example, the background color of the web page is injected through the background property added to the BODY selector. Although white is the default, it is sometimes desirable to set it so that the user does not specify their background color through the browser settings. The lines of the table should have the same color, in this case they are clearly not displayed and only divide the cells among themselves.

The result of Example 4 is shown below.

Figure: 3. View of borders that match the background color

© 2020 Mobile and Computer Gadgets