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
| Heading 1 | Heading 2 |
|---|---|
| Cell 3 | Cell 4 |
In this example, we get a blue background color for the cells (tag
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.
| Heading 1 | Heading 2 |
|---|---|
| Cell 3 | Cell 4 |
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
| 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 Explorer version 7 and up does not support the border-spacing property, so tables in this browser will use the default cellspacing value (usually 2px).
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
| Heading 1 | Heading 2 |
|---|---|
| Cell 3 | Cell 4 |
This example uses a black double border around the table itself and a solid white border 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 double lines are formed where the cells join. They are obtained again due to the action of the cellspacing attribute of the tag
| 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
Example 2.8. Align cell contents horizontally
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Heading 1 | Cell 1 | Cell 2 |
|---|---|---|
| Heading 2 | Cell 3 | Cell 4 |
In this example, the content of the tag
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
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Heading 1 | Heading 2 |
|---|---|
| Cell 1 | Cell 2 |
This example sets the height of the header
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
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
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Leonardo | 5 | 8 |
| Raphael | 11 | |
| Michelangelo | 24 | |
| Donatello | 13 |
The table view in the Safari browser is shown in Fig. 2.11a. The same table in the IE7 browser is shown in Fig. 2.11b.
A. In Safari, Firefox, Opera, IE8, IE9 browser
b. In IE7 browser
Rice. 2.11. View of a table with empty cells
The CSS specification gives unlimited possibilities for designing tables. By default, the table and table cells have no visible borders or background, and cells within the table are not adjacent to each other.
The width of table cells is determined by the width of their content, so the width of table columns can vary. The height of all cells in a row is the same and is determined by the height of the highest cell.
Formatting tables
1. Table borders
By default, the table and the cells inside it are displayed in the browser without visible borders. Table Borders are specified by the border property:
Table ( border-collapse: collapse; /*remove empty spaces between cells*/ border: 1px solid gray; /*set the outer border of the table to a gray color of 1px thickness*/ )
Header cell borders each column are specified for the th element:
Th (border: 1px solid grey;)
Cell Borders table bodies are specified for the td element:
Td (border: 1px solid gray;)
The thickness 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 grey;)
You can highlight the outer border of a table by giving it an increased width:
Table (border: 3px solid grey;)
Boundaries can be set partially:
/* set a gray outer border of 3px thickness for the table */ table (border-top: 3px solid gray; ) /* set a gray border of 1px thickness for the table body cell */ td (border-bottom: 1px solid gray;)
You can read more about the border property.
2. How to set the table width and height
Default table width and height determined by the contents of its cells. If the width is not specified, then it will be equal to the width of the widest row (row).
Table and column width is 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 specified. Row height tables can be manipulated by adding top and bottom padding to elements
Th, td (padding: 10px 15px;)
3. How to set the table background
Default table background and cells are transparent. If the page or block containing the table has a background, it will show through the table. If the background is specified for both the table and cells, then in places where the background of the table and cells overlap, only the background of the cells will be visible. The background for the table as a whole and its cells can be:
filling,
,
.
4. Table columns
The CSS table model is focused mainly on rows (rows) formed using the tag
using tag
You can set the background for any number of columns;
using the selector table td:first-child , table td:last-child you can set styles for the first or last column of the table (except for the first cell of the table header);
Using the table selector td:nth-child (column selection rule), you can set styles for any table columns.
You can read more about CSS selectors.
5. How to add a table title
You can add a title to a table using a tag
| Company | Q1 | Q2 | Q3 | Q4 |
|---|
Rice. 2. Example of displaying a header under a table 6. How to remove space between cell frames
By default, table cell frames are separated by a small space. If you set border-collapse: collapse for the table, the gap will be removed. The property is inherited.
Syntax
Table (border-collapse: collapse;) 
Rice. 3. Example of tables with merging and separate cell frames
7. How to increase the space between cell frames
Using the border-spacing property, you can change the distance between cell frames. 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;) 
Rice. 4. Example of tables with increased spaces 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 cell is set to a background and a table is set to table (border-collapse: collapse;) , then the cell will not be hidden. Inherited.
| Company | Q1 | Q2 | Q3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Rice. 5. Example of hiding an empty table cell 9. Layout a table using the table-layout property
The table layout layout is determined by one of two approaches: fixed layout or automatic layout. In this case, layout refers to how the width of the table is distributed among the widths 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 the text is read horizontally. Each entity is a separate row. You can give tables like this a minimalist look by placing a two-pixel border under the th header. 
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephine Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
When there are a large number of rows, this table design makes them difficult to read. To solve this problem, you can add a one-pixel border below all td elements. 
Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*the rest of the code is as in the example above*/
Adding a :hover effect to the tr element will make tables designed in a minimalist style easier to read. When you hover your mouse over a cell, the remaining cells in the same row are highlighted simultaneously, making it easier to track 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 design them in a minimalist style by adding space to separate 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. Boxed style
The most reliable style for designing tables of all types is the so-called “boxed” style. It is enough to choose a good color scheme, and then set the background color for all cells. Don't forget to emphasize the difference between lines by setting borders as a separator. 
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 harmoniously match your website. If the site is heavy on 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
The zebra table looks quite attractive and comfortable. An additional background color can serve as a visual cue for people when reading 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, minimalistic newspaper style might look like this: play with the color scheme, add borders, padding, different backgrounds, and a hover effect when 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 are looking for a quick and unique way to design a table, choose an attractive image or photo that relates to the theme of the table and set it as the table background. 
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); )
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 So let's make the borders for the table. For example, for the one we already have:
Result in browser: In turn, to remove the borders of the HTML table, or you can also say, make them invisible, you need the 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.
Result in browser: Now let's add borders to each cell as well. To do this, simply add styles:
Result in browser: Agree that the border defined using CSS does not look as good 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! CSS allows you to set not only the style of the table border, but also the style of the borders of individual cells. Since each cell has its own borders, the border between adjacent cells is double. But it is possible to combine the boundaries of neighboring cells into one. There is a border-collapse property for this. It takes values: border-collapse: separate - each cell has its own border (default) border-collapse: collapse - shared border border-collapse: inherit - the value is taken from the parent element For example, let's create a table and set a frame for the cells of all tables that will be on the page. Let's not change anything at first to see how the table will look: Style: 1
Homework. In this lesson, I will not describe everything in detail either - only general points. For completeness, look at the example result.
attribute border, giving it a value other than zero.
Top left cell Top right cell
Bottom left cell Bottom right cell
How to remove table borders
To do this, remove the border attribute from our table and add styles:
Top left cell
Top right cell
Bottom left cell
Bottom right cell
How to remove padding between cells in an HTML table
2
3
4
5
6
only to create four horizontal menu buttons in the page header. In other cases, let the images go in the background, and in the second cells of the tables only colors are used, and in the first and last table it is #99FF99.