Computer

Round shapes for css tables.

Tables are an integral element of the hypertext language HTML markup, which still remains relevant for structuring and convenient presentation of various data.

A long time ago, when websites were laid out primarily in tabular form, tables were in high demand and made up almost the entire framework of the new resource. Afterwards, the importance of the element decreased in popularity relative to blocks (div), with the help of which the layout capabilities became more expanded for both desktop and mobile versions sites.

Currently, tables are used, for example, for price lists, lists, characteristics, questionnaires and much more, and with the use of Cascading Style Sheets (CSS), we can improve the visual presentation of tables in a document. Here I will present several examples of designing HTML tables with source code, which can later be used when developing your project.

Styling Tables with CSS

Table styling is a ready-made table built in HTML with CSS properties specified for certain tags. I hope you know how and where to paste the received source to display the result on the screen.

First, I will give the general HTML code of the table, which we will subsequently style.

Name	Description	Price
Name	Characteristics	Price
Name #2	Characteristics	Price
Name #3	Characteristics	Price

CSS Templates

The templates do not claim to be original, but they can be useful to many.

Table (width: 100%; border-collapse: collapse;) table td (padding: 12px 16px;) table thead tr (font-weight: bold; border-top: 1px solid #e8e9eb;) table tr (border-bottom: 1px solid #e8e9eb;) table tbody tr:hover (background: #e8f6ff;)

By the way, if we didn't use the tag , then you could set your own styles for the first row using the pseudo-class:nth-child(1) .

Table (width: 100%; border-collapse: collapse;) table thead tr (color: #ffffff; font-weight: bold; background: #00bf80;) table thead tr td (border: 1px solid #01ab73;) table tbody tr td (border: 1px solid #e8e9eb;) table tbody tr:nth-child(2n) (background: #f4f4f4;) table tbody tr:hover (background: #ebffe8;)

Table (width: 100%; border-collapse: separate; border-spacing: 4px;) table thead tr (color: #ffffff; font-weight: bold;) table thead tr td (border-radius: 4px 4px 0 0; background: #2e82c3;) table tbody tr td (border: 1px solid #2e82c3; border-radius: 4px; background: #cbdfef;) table tbody tr td:hover (background: #a2c3dd; transition-duration: 0.2s;)

Name	Description	Price
Samsung	Galaxy S8, S8 Plus	2400 ₽
Xiaomi	Redmi 4A, 4X	520 ₽
Meizu	M3S, M5S	720 ₽

Table (width: 100%; text-align: center; border-bottom: 2px solid #dfdfdf; border-radius: 6px; border-collapse: separate; border-spacing: 0px;) table thead tr (color: #ffffff; font-weight: bold; background: #c83240;) table tr td (border-right: 1px solid #dfdfdf;) table tr td:last-child (border-right: 0px;) table tbody tr:nth-child(1n ) (background: #f6f6f6;) table tbody tr:nth-child(2n) (background: #e6e6e6;) table tbody tr:hover (background: #ffe8e8; transition-duration: 0.6s;)

CSS Properties

What do the CSS properties used in templates mean:

width- table width;
border-collapse- a way to display cell borders around the table;
border-spacing- the distance between the borders of cells in the table;
border-radius- rounding the corners of the frame;
padding- internal distance of the element from the edge of the border;
color- element color;
text-align- text alignment horizontally;
font-weight- font weight;
background- background parameters;
transition-duration- animation duration;
border- thickness, style and color of the border around the element.

Hi all! So, now you know how to create elementary tables consisting of as many rows and columns as necessary. Not bad, not bad. Now let's talk about the design of these tables.

In the previous lesson, tables were displayed without borders. And, you see, it looks so-so, you can’t even call it a sign. To make table borders in HTML, you should add to the tag

attribute border, giving it a value other than zero.

So let's make the borders for the table. For example, for the one we already have:

Top left cell	Top right cell
Bottom left cell	Bottom right cell

Result in browser:

How to remove table borders

In turn, to remove boundaries HTML tables, or you can also say, make them invisible, you need an attribute border set value 0 . After these simple steps, the frame will be removed.

The attribute allows you to create, but not manage, boundaries. It only allows you to change their thickness.

Therefore, now we will talk about CSS, whose properties make it possible using border create different borders, both inside each cell and external ones, around the table as a whole.

Let's look at how to use CSS to create the outer and inner borders of a table.
To do this, remove the border attribute from our table and add styles:

Example table

Top left cell	Top right cell
Bottom left cell	Bottom right cell

Result in browser:

Now let's add borders to each cell as well. To do this, simply add styles:

Result in browser:

How to remove padding between cells in an HTML table

Agree that a border defined using CSS does not have the same appearance, as we would like. Undoubtedly, from an aesthetic point of view, there is something to work on. On the browser page you can see that by default it displays table and cell borders separately. The example clearly demonstrates this.

However, you can completely get rid of such borders, which are called double ones, if you use the border-collapse CSS property. In practice it looks like this:

Table ( border: solid 1px blue; border-collapse: collapse; ) ...

As a result, the distance between cells is removed:

The collapse value assigned to the border attribute allows you to remove double borders. As you can see, the result is the collapse of adjacent cell borders, as well as cell frames and the outer table frame. As for the latter, it may be removed completely. And if there is a need to display it, you need to increase its width. This way we got rid of separators in the table. And in the next lesson we will talk about how you can set vertical and horizontal boundaries. Good luck to all!

In this article you will see how to use CSS styles format tables.

In the early days of the Internet, designers often used tables to create layouts. Now almost all sites are marked with CSS help, and tables are used for their intended purpose - to display data.

Tags for table layout

A table can be created using the following tags:

, so when it was necessary to leave a cell without content but display the background color, a non-separated 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 graphics have become widespread. 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 sorts of spacers based on them has passed. Browsers work quite correctly with tables even without the presence of cell contents.

To control the appearance of empty cells, use the empty-cells property; when set to hide, the border and background are not displayed in empty cells. If all cells in a row are empty, then the entire row is hidden. The cell is considered empty in the following cases:

there are no symbols at all;
the cell contains only a newline, tab, 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

Example 2.4. Fields in tables

Using empty-cells

A table can be created using the following tags:

Defines the title (more like signature) of the table.

Defines one column in a table.

Defines a group of columns in a table.


Creates a table.
Defines one or more rows in a table.
		Creates one cell in the table.

Defines the rows that appear at the bottom of the table.
		Defines a title for each table column.

Designed to store one or more rows that are presented at the top of the table.

Creates a row in a table.

As you can see, in tables you can use a large number of tags, the more CSS styles we can use in each specific case.

Below we will look at the CSS properties used to format tables.

Borders

Cells do not inherit the borders described in the table tag. Borders table cells can be described using the border property, but this creates a gap.

Th, td (border:2px solid black;)

This space can be removed using the CSS border-spacing property (for IE you will need the cellspacing attribute of the table tag). However, if you remove the space, the borders will double in size.

Table (border-spacing:0;)

To get rid of double borders and spaces, use the border-collapse property with the value collapse .

Table (border-collapse:collapse;)

Indentations

Padding (cellpadding attribute in HTML) is defined using the padding property. Can only be applied to cells (

) or to cells under headings (

) .

Th, td (padding:10px 12px 13px 14px;)

Alignment

text-align property

Text-align properties (in HTML align attribute) and vertical-align align content within a table cell. The text-align property (values: left , right , center , justify ) aligns content horizontally. Scope of tags:

, .

Th, td, table (text-align:center;)

vertical-align property

The vertical-align property (values: top , baseline , bottom , middle ) aligns content vertically. Scope of application: th , td .

Th, td (vertical-align:bottom;)

Format the columns

You can apply width properties and background group properties to col and colgroup tags. This is convenient if you want to highlight a column or set it to a specific width.

Class and IDs

To format a specific cell or table, do not forget about classes, identifiers, etc.

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

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. In this case, you should remember the rules for using styles, in particular, the inheritance of element properties. Although the background property is not inherited, the default background value for cells is transparent, i.e. transparency, so the background fill effect is also obtained for the cells. If, simultaneously with TABLE, you set a color for the TD or TH selector, then this color will be set as the background of the cell (example 2.3).

Example 2.3. Background color

Tables

Heading 1	Heading 2
Cell 3	Cell 4

IN in this example we get Blue colour cell background (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 "shown through".

And the color for the TD selector is specified explicitly, so the cells are “filled” with blue.

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

Rice. 2.4. Changing the background color

Margins inside cells

Margin is the distance between the edge of a cell's contents and its border. Typically the cellpadding attribute of a tag is used for this purpose.

. It defines the margin value in pixels on all sides of the cell. It is possible 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

Tables

Heading 1	Heading 2
Cell 3	Cell 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

In this example, by grouping selectors, the fields are set simultaneously for the TD and TH selectors. The result of the example is shown in Fig. 2.5.

Rice. 2.5. Fields in cells

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

ignored.

Distance between cells

To change the distance between cells, use the cellspacing attribute of the tag

. The effect of this attribute is clearly visible when you use borders around cells or when filling cells with a color that stands out from the background of the page. The style property border-spacing 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 determines the horizontal distance (that is, to the left and right of the cell), and the second determines the vertical distance (above and below).

Example 2.5. Distance between cell borders

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Replacing cellspacing

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

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

Rice. 2.6. Table view when using border-spacing

Internet Browser Explorer version 7 and up does not support the border-spacing property, so in this browser the default cellspacing value (usually 2px) will be used for tables.

When adding a border-collapse property with a value of collapse to a TABLE selector, the cellspacing attribute is ignored and the border-spacing value is reset to zero.

Borders and frames

By default, there is no border in the table initially, and its addition occurs using the border attribute of the tag

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

Using the cellspacing attribute

It is known that the cellspacing attribute of the tag

sets the distance between table cells. If you use different background colors for the table and cells, 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 won’t repeat it.

Note that this is not entirely convenient way creating boundaries because it has a limited scope. This way you can only get a single-color grid, and not vertical or horizontal lines in the right places.

Using the border property

The border style property simultaneously sets the border color, style, and thickness around an element. When you need to create separate lines on different sides, it is better to use the derivatives - border-left , border-right , border-top and border-bottom , these properties respectively define the border on the left, right, top and bottom.

By applying the border property to a TABLE selector, we add a border around the table as a whole, and to a TD or TH selector we add a border around the cells (Example 2.6).

Example 2.6. Adding a Double Frame

Example 2.4. Fields in tables

Tables

Heading 1	Heading 2
Cell 3	Cell 4

This example uses a double black border around the table itself and a solid border white around each cell. The result of the example is shown in Fig. 2.7.

Rice. 2.7. Border around table and cells

Please note that at the junction of the cells, double lines. 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 set

, then we get not double, but single lines, but of double thickness. To change this feature, use the border-collapse style property with the value collapse , which is added to the TABLE selector (example 2.7).

Example 2.7. Creating a Single Frame

Example 2.4. Fields in tables

Tables

Heading 1	Heading 2
Cell 3	Cell 4

This example creates a solid green line between cells and a black line around the table. All borders within the table have the same thickness. The result of the example is shown in Fig. 2.8.

Rice. 2.8. Border around table

Aligning cell contents

By default, text in a table cell is aligned left. The exception to this rule is the tag

, it defines a header that is centered. To change the alignment method, use the text-align style property (example 2.8).

Example 2.8. Align cell contents horizontally

Example 2.4. Fields in tables

Tables

Heading 1	Cell 1	Cell 2
Heading 2	Cell 3	Cell 4

In this example, the content of the tag

is aligned to the left, and the content of the tag

- in the center. The result of the example is shown below (Figure 2.9).

Rice. 2.9. Aligning text in cells

Vertical alignment in a cell is always centered unless otherwise noted. This is not always convenient, especially for tables whose cell contents vary 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. Align cell contents vertically

Example 2.4. Fields in tables

Tables

Heading 1	Heading 2
Cell 1	Cell 2

This example sets the height of the header

like 40 pixels and the text is aligned to the bottom edge. The result of the example is shown in Fig. 2.10.

Rice. 2.10. Aligning text in cells

Empty cells

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

Older browsers did not display the background color of empty view cells