Designing tables using CSS is an interesting and responsible task. You need to approach this business competently, with knowledge of all the possibilities of styles. In addition, you need to have a sense of beauty so as not to frighten visitors to your site with your creativity.
In the tables you can transform almost everything. Beautiful CSS table layouts include border design, table background, cell background, spacing between them, and more. Consider the most basic.
Table border
The CSS table layout style always implies a game with a border. All tables are not framed by default. That is, it is equal to 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 frame. 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.
The solid frame is most often used, since it looks more attractive and does not distract attention from the main content of the site.
The border property can also be specified in the directions. The border can only be set for the upper, lower, left or right side. Since in some cases the option with a frame for the entire table is not suitable at once.
table {border-top: 1px solid red; }
So you can set the frame only for the top of the table. Similarly for any other side, just instead of top we write: right, left or bottom.
Table header
The table title can be specified using the <caption> tag. You can write many properties for this tag in CSS for more fine-tuning. In CSS, table layout is good because you can maneuver the elements the way you want.
This title appears as standard in books (for example, “Table 1”).
You can also specify the location of this header with the caption-side property (top or bottom). Left or right alignment is specified by the text-align property.
Table background
The background of the table may be some color or pattern. Color is set by the background-color property. The names of the properties are fully consistent with those used in speech. This makes it easier to remember many times.
Color can be specified both by name and by various 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.
You can use the option with transparency in cases where all the tables in the text in the CSS file are drawn in the same color, but in this case there is no such need.
In addition, the background may be an image. To do this, the background-image property is specified in the style. The path is specified like this:
url ('URL')
The path to the file can be either relative or absolute.
A more complex fill can be done with a gradient:
- linear-gradient ();
- radial-gradient ();
- repeating-linear-gradient () and repeating-radial-gradient () - repeat 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 the visual separation of lines facilitates the reading of information.
In addition to rotation, you can also indicate the number of a specific column or row. For example, like this:
- tr: nth-child (even) {...} - indication of alternation of lines;
- tr: nth-child (1) {...} - specifying the property of a particular line;
- td: nth-child (even) {...} - indication of alternating columns;
- td: nth-child (1) {...} - indicating the property of a particular column.
In addition to alternation and numbers, you can specify - the first (td: first-child) or the last (td: last-child).
Space between cells
In CSS, table layout allows you to remove the gaps between cells. By default they are. For example, if you set a frame in the table without adjusting the distance between the borders, then there will be such a result.
Agree, it does not look very nice and not comfortable to read. Users will have ripples in their eyes because of this. You can remove these gaps by writing this line in the style of the table:
border-collapse: collapse
But it also happens that the distance, on the contrary, needs to be increased. Moreover, the size of the gaps can be specified both between columns and between rows. To do this, specify the following value (instead of collapse):
border-collapse: separate
But such an action will indicate that it is necessary to separate the cells. How to separate them is indicated by an additional property:
border-spacing: 20px.
If you need to specify a different distance between rows and columns, then two values are indicated:
border-spacing: 10px20px.
Browser difference
Keep in mind that in CSS, table layout may look different depending on the browser. The situation is especially bad with older versions that CSS innovations do not support.
Above is an example of the frame thickness for digital values.
Next, we give an example of the frame thickness for constants.
Frame styles are also very different.
Therefore, when developing, always see the result in different browsers.
In CSS, table layout is recommended with browser type checking. A particularly big problem used to be with users with older versions of Internet Explorer.
Most advanced developers can use completely different CSS files depending on the browser. And someone does checks in each or any particular style (class).
Most problems arise with shadows.
CSS: table layout, examples
Design can be the most diverse. It all depends on the site as a whole and its design. Everything should be combined and not be full of flowers. The taste of the developer also makes a big difference. The feeling of beauty is different for everyone.
We give examples of various tables. The figure above shows the use of tilt and the game with the background color and borders.
Many will be interested in an example of a beautiful neat design that will not cut eyes of users. This option is appropriate in almost any situation.
The edges can be made rounded. It looks pretty pretty.
Conclusion
As you can see, there are a huge number of tools for designing the appearance of tables in CSS. Each parameter also has a huge number of value options. If you use all this at once, you can create masterpieces. Especially if you do adaptive design for all browsers.
The main thing in the design is not to overdo it with the effects. Everything needs to be done in moderation. At first, typesetters like to experiment and use all their knowledge at once. As a result, the tables are oversaturated. 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 a background image is set there that will overlap the specified color.