CSS: the design of tables. Examples of design

Making tables using CSS is an interesting and important activity. Approach to this matter needs to be competently, with knowledge of all the possibilities of styles. In addition, you need to own a sense of beauty, so as not to scare away visitors with your creativity.

In tables you can transform almost everything. The beautiful design of CSS tables means using the design of borders, the background of the table, the background of cells, the gap between them and much more. Let's consider the most basic.

Table boundary

The CSS style of the design always means playing with a border. All tables are not bordered by default. That is, it is 0 pixels. But this can be fixed using the border property.

You can specify an outer border for the entire table:

Table {border: 3px solid black; }

Thanks to this line, all the tables on the site where this style is used will have a black border. Note that the border is only at the edges, but not inside the table. For cells and rows, the frame is specified differently.

Th, td {border: 3px solid black;}

You can specify any thickness and color. Keep in mind that borders do not double when docking cells.

The word solid means solid design. You can specify other values.

Most often, the solid frame is used, because it looks more attractive and does not divert attention from the main content of the site.

The border property can also be specified in the directions. The boundary can be set only for the top, bottom, left, or right side. Since in some cases the option with a frame for the entire table does not fit right away.

Table {border-top: 1px solid red; }

So you can set the frame only for the top of the table. Similarly, for any other parties, simply instead of top write: right, left or bottom.

Table title

The title of the table can be specified using the tag. In this tag, you can write in CSS a lot of properties for more fine-tuning. In CSS, the design of tables is good because you can maneuver elements as you want.

This header is displayed in the same way as it is standard in books (for example "Table 1").

You can also specify the location of this header with the caption-side property (top or bottom). The left or right alignment is specified by the text-align property.

Table background

The background of the table can be any color or pattern. The color is set by the background-color property. The names of properties fully correspond to those used in speech. This makes it easier to memorize many times.

The color can be specified both by name and by different encodings. In addition, you can specify the following:

• Transparent - the transparency of the element.
• Inherit - the color is the same as the parent element.
• Initial is the default value.

A variant with transparency can be used in those cases when all tables in the text in the CSS file are made in one color, but in this case there is no such need.

In addition, the background can be an image. To do this, the style prescribes the background-image property. The path is indicated like this:

Url ('URL')

The path to the file can be either relative or absolute.

More complex fill can be done with a gradient:

• Linear-gradient ();
• Radial-gradient ();
• Repeating-linear-gradient () and repeating-radial-gradient () - repeating the gradient.

Cell background

In addition to the background as a whole, you can specify an alternating background in columns or rows. For registration, this property is used very often, since visual separation of lines makes it easier to read information.

In addition to interlacing, you can specify the number of a specific column or row. For example, like this:

• Tr: nth-child (even) {...} - specify the alternation of lines;
• Tr: nth-child (1) {...} - specifies the property of a particular string;
• Td: nth-child (even) {...} - indication of the alternation of columns;
• Td: nth-child (1) {...} - specifies the property of a particular column.

In addition to the interleaving and numbers, you can specify the first (td: first-child) or the last (td: last-child).

Spacing between cells

In CSS, the design of tables allows you to remove the gaps between cells. By default, they are. For example, if you specify a frame in a table without setting the distance between the borders, then this is the result.

Agree, it does not look very nice and not convenient for reading. Users will be in the eye ruffle because of this. You can remove these gaps by writing the following in the style of the table:

Border-collapse: collapse

But it also happens that the distance, on the contrary, needs to be increased. And the size of intervals can be specified both between columns, and between lines. To do this, specify the following value (instead of collapse):

Border-collapse: separate

But this action will indicate that you need to separate cells. How to separate them, is indicated by an additional property:

Border-spacing: 20px.

If you want to specify a different distance between rows and columns, then two values are specified:

Border-spacing: 10px20px.

Difference in browsers

Keep in mind that in CSS, the appearance of tables may look different, depending on the browser. The situation is especially bad with older versions, which innovations in CSS do not support.

Above is an example of the thickness of the frame for digital values.

Here is an example of the thickness of the frame for constants.

Frame styles are also very different.

Therefore, when developing, always look at the result in different browsers.

In CSS, it is recommended to do table design with checking the type of browser. The biggest problem was with users with older versions of Internet Explorer.

Very advanced developers can connect completely different CSS files depending on the browser. And someone does checks in each or some particular style (class).

Most problems arise with shadows.

CSS: the design of tables, examples

The design can be very diverse. It all depends on the site in general and its design. Everything should be combined and not colorful. Also, the taste of the developer also plays a big role. The feeling of beauty is different for all.

We give examples of different tables. The figure above shows the use of the tilt and the game with the background and borders color.

Many will be interested in an example of beautiful neat design that will not cut eyes to users. This option is appropriate in almost any situation.

Edges can be made rounded. It looks pretty beautiful.

Conclusion

As you can see, to create the appearance of tables in CSS there is a huge number of tools. Each parameter also has a huge number of variants of values. If you use all this at once, you can create masterpieces. Especially if you make an adaptive design for all browsers.

The main thing in registration is not to overdo it with effects. Everything must be done in moderation. At first, layout designers like to experiment and use all their knowledge at once. As a result, tables are supersaturated properties. Try to avoid these mistakes.

Moreover, some parameters may interfere with each other. For example, there is no need to specify the background color of the table, if at the same time there is a background image that will overlap the specified color.