How to remove space between html table cells. Digression from the topic or how to remove indents along the edges of the page
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 appearance 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 IE7 is shown in Fig. 2.11b.
A. In Safari, Firefox, Opera, IE8, IE9 browser
b. In IE7 browser
Rice. 2.11. Table view with empty cells
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 |
In this example we:
The result of our example: Space between cellsAfter the example discussed above, you may have noticed that we still have a gap between all the table cells. Let's look at how to remove the space between table cells or increase it. To set the distance between the borders of adjacent cells, you must use the CSS property border-spacing.
In this example we:
Please note that if only one length value is specified in the border-spacing property, then it indicates the intervals, both horizontally and vertically, and if two length values are specified, then the first determines the horizontal distance, and the second vertical. The distance between the borders of adjacent cells can be specified in CSS units (px, cm, em, etc.). Negative values are not allowed. The result of our example: Show borders around table cellsYou can say: - so, we removed the space between the cells using the border-spacing property with a value of 0 , but why do our cell borders now intersect? Double borders are caused by the fact that the bottom border of one cell is added to the top border of the cell that is below it, a similar situation occurs on the sides of cells and this is logical from a table display point of view, but fortunately there is a way to tell the browser that we We don’t want to see such loose behavior of cell borders. To do this, you need to use the border-collapse CSS property. Oddly enough, using the border-collapse property with the collapse value is the best way to remove the space between cells without getting double borders between them. Let's compare the behavior of borders when using the border-spacing property with a value of 0 and the border-collapse property with a value of collapse :
In this example we:
The result of our example: Behavior of empty cellsYou can use CSS to set whether the borders and backgrounds of empty cells in a table should be displayed or not. This behavior is controlled by the empty-cells property, which by default, as you may have noticed from the previous examples, displays empty cells. Let's move on to an example:
To understand how the empty-cells property works from this example is very simple, if it is set to hide , then empty cells and the background in them will be hidden, if set to show (default), then they will be displayed. Table header locationLet's look at another simple property for styling tables - caption-side , which sets the position of the table header (above or below the table). By default, the caption-side property is set to top , which places the caption above the table. In order to place a title under the table, you need to use the property with the value bottom . Let's look at an example of using this property:
In this example we created two classes, which control the position of the table header. First grade ( .topCaption) puts the table title above it, we applied it to the first table, and the second class ( .bottomCaption) places the table title below it, we applied it to the second table. Class .topCaption has the default caption-side property value and is created for demonstration purposes. The result of our example: Horizontal and vertical alignmentIn most cases, when working with tables, you will need to adjust the alignment of content within header and data cells. The text-align property is used for horizontal alignment, similar to any text information. We discussed the use of this property for text earlier in the article “”. To set the alignment for content in cells, you must use special keywords with the text-align property. Let's look at the use of keywords for this property in the following example.
In this example we created four classes, which specify different horizontal alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to the value of the text-align property The result of our example: In addition to horizontal alignment, you can also define vertical alignment in table cells using the vertical-align property. Please note that when working with table cells, only the following values * of this property are applied: * - Sub , super , text-top , text-bottom , length and % values applied to a table cell will behave as if using the baseline value. Let's look at an example of use:
In this example we created four classes, which specify different vertical alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to the value of the vertical-align property that was applied to that row. Algorithm for placing a table layout in a browserCSS by default uses an algorithm for the browser to automatically arrange the table layout. In this case column width is set by the widest non-breaking content of the cell. This algorithm can be slow in some cases because the browser must read all the contents in the table before determining its final layout. To change the browser's table layout type with automatic on fixed, you must use the CSS property table-layout with the value fixed . In this case, horizontal placement depends only on the width of the table and the width of the columns, and not on the contents of the cells. The browser starts displaying the table immediately after the first row is received. As a result, a fixed algorithm allows you to create a layout for such a table faster than using the automatic option. When working with large tables, you can use a fixed algorithm to improve performance. Let's look at the use of this property using the following example:
In this example we: Styling table rows and columnsWe have already partially touched on methods for styling table rows and columns in the article “”. In this article, we looked at using the group pseudo-class, which allows you to alternate row styles in tables using values even (honest) And odd (odd), or by elementary mathematical formula. Let's review the techniques we covered earlier and explore new ways to style rows and columns in tables. Let's move on to examples.
In this example we: The result of our example: Let's move on to the next example, in which we will look at options for styling table rows.
In this example we:
|
Loading...