The borders of an html table can be easily changed using css tools. Customization of their display is carried out due to the properties: collapse and spacing.
To edit the table view, use the border property group. It allows you to adjust the width, color, presence / absence of borders, their style and other display features.
The basics
A table without styles will look like structured text without borders. Table in html is built thanks to the tags:
- tr for strings;
- th for headings;
- td for columns.
<table> <tr> <th>Head</th> <th>Head</th> <th>Head</th> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>
The size and font of the text, background, indents from the edge of the browser window are set in css in the body container.
body { font-family: Helvetica, Sans-serif; font-size: 5vw; color: black; background-color: rgba(228, 228, 245); padding: 20vh; }
With the help of styles make out the appearance of the matrix. The border property allows you to specify the thickness, appearance and color of the border of the html table.
{ border-width: 2vw; border-style: dotted; border-color: skyblue; }
Abbreviated by the border: width style color pattern.
{ border: 1px solid #4c6ea1; }
For a certain side, set according to the pattern border-top (/ right / bottom / left) -style (/ color / width / radius).
{ border-top-color: darkblue; }
Padding sets padding inside the cell from text to frame, text-align sets the alignment.
Using styles, make out the appearance of the table. The border property allows you to specify the value of the thickness, style and color of the frame. Padding sets indents from text, text-align sets alignment.
th, td { border: 1vw solid #4c6ea1; padding: 1vw; text-align: left; }
No frame
It is not necessary to use border or separately specify border-color, -width and -style, since you can make a html-table without borders with full-fledged design. For example, the following code sets the background, padding, and rounded corners (the last matrix without internal or external lines).
table { text-align: left; background-color: rgba(228, 228, 245); border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; } td, th { padding: 1.5vw; }
Thanks to the ability to set the background for each cell, a table without borders may look like it has one.
table { text-align: left; background-color: rgba(228, 228, 245); width: 70vw; border-spacing: 2vh 2vh; } td, th { padding: 1.5vh; } td { background-color: rgba(247, 247, 255); }
You can remove the borders of the html table, leaving the internal ones. To do this, for example, register the border property for cells (tr), set common borders (collapse) on adjacent sides and forbid drawing lines around the matrix (hidden). The last action will hide the cell lines, which when collapse is turned on, appear in the same place as the outer edges of the table.
table { text-align: center; border-collapse: collapse; background-color: rgba(228, 228, 245); border-radius: 50%; width: 29vh; height: 10vh; border-style: hidden; } td { padding: 1.5vh; border: 0.5vh solid black; }
Collapse and separate
One of the main properties of table in html - border-collapse - determines how cell borders are displayed. A property can have one value out of three: collapse, separate, inherit.
table { border-collapse: collapse; }
The default value is separate, so each cell will have its own border. Thanks to collapse, you can merge cell lines so that their contents are separated by one frame. The picture shows the three states of borders described above: without styles; with a default border-collapse value; with a border-collapse value that leaves a common line between cells.
Double frames
The collapse property allows you to make cell boundaries in an html table both independent and common. The border-spacing property, which adjusts the distance between cell frames, is often used with it. You can specify both horizontal and vertical spacing.
table { border-spacing: 0.5vw 1vw; }
The first value indicates the horizontal distance between cells, the second - vertical. If the frame is set for the table itself, then the distance from it to the cells is also formed by the spasing property, but padding matrices can also affect it. In cases where the matrix has a background, the vacant space between cells will be filled with it.
table { border-spacing: 0.5vw 1vw; border: 1vw solid #4c6ea1; padding: 1vw; background-color: black; } td, th { border: 1vw solid #4c6ea1; padding: 0.3vw; text-align: left; background-color: white; }
Empty cells
If the table does not specify a union of cell borders, the empty-cells property allows you to display their lines and background, which are considered empty (marked as visibility or have no characters). If you want to show the borders and background of each cell, the property is set to show.
table { empty-cells: show; }
The hide value hides the borders and background of empty blocks. If all cells in the row are empty, then the row has zero height and only one vertical line.
table { border-spacing: 0.5vw 1vw; border: 0.1vw solid #4c6ea1; padding: 0.5vw; background-color: rgba(33, 31, 171, 0.12); empty-cells: hide; } td, th { border: 0.3vw solid #4c6ea1; padding: 0.5vw; text-align: left; background-color: white; }
Attribute
There is a rules attribute to highlight borders for groups of elements (cells, columns, rows, groups of rows or columns). Its value is written directly in html in the table tag.
It allows you to selectively draw element frames. It is enough to specify the attribute in html, this will create internal lines between the cells. The border of the html table will have to be specified manually in css.
<table rules="all"> <tr> <th>Head</th> <th>Head</th> <th>Head</th> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>
table { border-top: 1vw solid #486743; font-size: 5vw; } th, td { padding: 2vw; }
So, the first picture shows the pure work of the attribute without additional border design through table. In the second picture, the upper line is drawn, which is set through the instructions.
table { border-top: 1vw doted #486743; }
An attribute can have multiple values. All creates borders between cells with a border thickness of 1px. Cols creates lines between columns, rows - between rows, none erases the edges. The picture below shows examples of a table with all and rows values.
You can change the color of cell borders and the width of the border when using the rules attribute using border and bordercolor.
Style conflicts
Cells, rows, columns, and element groups can be set to their own boundary values. However, they can vary in three ways: style, thickness and color.
In collapse mode, conflicts arise. Due to the fact that the rule of two different cells can be applied to one border, the problem arises of choosing a style that will be a priority. According to E. Malchuk, the most “catchy” one wins (except hidden).
- If one of the elements in the border-style property has a hidden value for the disputed border, this style wins. Hidden has top priority.
- The smallest weight is none. It also dictates the lines not to be displayed, but for the instruction to be executed, all elements for this line must have this (none) rule.
- Between thin and thick borders, thick ones have a higher priority.
- With the same framework, but different styles, the double double always wins, followed by solid, dashed, dotted.
- If the differences are only in colors, then the appearance of the smallest component is always higher (cell design takes precedence over rows and rows are higher than tables).
Conflict illustration
It is easy to illustrate the conflict of styles on the table already considered. It is enough to add a couple of classes to the cells and prescribe the appearance for them. Html takes the form:
<table> <tr> <th>Head</th> <th>Head</th> <th>Head</th> </tr> <tr> <td>Cell</td> <td class="second_cell">Cell</td> <td class="third_cell">Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>
The corresponding css.
body { font-family: Helvetica, Sans-serif; font-size: 5vw; color: black; margin: 0; width: 80vw; background-color: white; padding: 3vw; } table { background-color: rgba(33, 31, 171, 0.12); padding: 0.5vw; border-collapse: collapse; border-spacing: 0.5vw 1vw; border-style: hidden; } th { padding: 1vw; text-align: left; border: 0.1vw solid #4c6ea1; } td { padding: 1vw; border: 0.2vw dotted #4c6ea1; } .second_cell { border: 0.01vw solid #4c6ea1; } .third_cell { border: 0.01vw double red; }
Frame Styles
The border design can be set for each side of the cell separately. To do this, it is enough to specify not one value in the border-style, but list four, respectively, to the sides of the cell.
th, td { padding: 1vw; text-align: left; border-width: 0.5vw; border-color: darkred; border-style: dotted; } .seven { border-top-color: skyblue; border-top-style: solid; border-right-width: 2vw; border-bottom-style: dashed; border-left-style: hidden; }
You can specify data on one line by specifying one to four different values. Each traditionally becomes an instruction for one of the parties.
- If you put two values, the first will be responsible for the lower and upper boundaries, the second for the left and right.
- Of the three, the first is responsible for the upper, the second for the left and right, the third for the bottom line.
- Four values uniquely identify each of the lines, starting from the top clockwise to the left.
You can specify the design of cell borders through a simple definition of data for each side, as shown above.
There are ten styles for the frames. All of them change the line or delete it:
- none - no border;
- hidden - stricter none, blocks the appearance of the trait (in a conflict situation);
- dotted - from points;
- dashed - dotted
- solid - solid;
- double - double solid;
- groove - the frame seems to be pressed into the surface;
- ridge is a convex line;
- inset - in fact for one side of the element it behaves like a ridge, if applied to the whole element, then top and left are shaded, and bottom and right are highlighted;
- outset - behaves like a groove when applied to one side of an element, shades bottom and right, top and left turn out to be lighter.
Each of the cells (to the top and left sides) has one of the styles applied. In order that they do not compete with each other, the "weakest", the highest values are put down.
table { background-color: rgba(33, 31, 171, 0.12); padding: 0.5vw; border-collapse: collapse; border: 0.3vw solid black; } th, td { padding: 1vw; text-align: left; } .one { border-top: hidden; border-left: hidden; } .two { border-top: 0.4vw double #4c6ea1; border-left: 0.4vw double #4c6ea1; } .three { border-top: 0.5vw solid #4c6ea1; border-left: 0.5vw solid #4c6ea1; } .four { border-top: 0.7vw dashed #4c6ea1; border-left: 0.7vw dashed #4c6ea1; } .five { border-top: 0.8vw dotted #4c6ea1; border-left: 0.8vw dotted #4c6ea1; } .six { border-top: 0.9vw ridge #4c6ea1; border-left: 0.9vw ridge #4c6ea1; } .seven { border-top: 1vw outset #4c6ea1; border-left: 1vw outset #4c6ea1; } .eight { border-top: 1.1vw groove #4c6ea1; border-left: 1.1vw groove #4c6ea1; } .nine { border-top: 1.2vw inset #4c6ea1; border-left: 1.2vw inset #4c6ea1; }
Material Structuring
The nature of the data presented in the matrix often requires modification of the boundaries of the table itself, the borders of its cells, rows or columns. To do this, you can use:
- zeroing lines (for border-width specify a value in 0px);
- hidden.
The advantage of hidden is the strength of its priority. If the rule is applied to the border of two elements at once and in one of them the border-style value is hidden, the line will not be displayed. That is, you can safely make the entire table, and then selectively remove unnecessary frames.
Using hidden in relation to the cells makes it impossible to restore the border by other methods (except for the heavyweight! Imporant). Therefore, if necessary, remove some of the sides of the cells, it is better to use none.
Let's say there is a table. The goal is to remove the vertical borders inside the first row. It is marked with a separate tag (title), so an additional class is not required. If you apply hidden to the entire tag, writing it border-left, then along with the internal borders, one part of the side frame of the table is deleted, which was not required by the condition. If we use none and the matrix line, then for internal features there will be two non-conflicting rules, and at the outer edge, none will conflict with the rule that is set in the table, and the side will remain in place.
The removal of individual cell lines is carried out using classes that are assigned to the corresponding elements, as was shown for an individual style, width and color.
Whereas it is easier to remove the side border in the html-table by referring to the external framework of the matrix, which are indicated in the table. It is enough to write an indication of a specific line in css.
table { border-left-style: hidden; }
Removing frames in strings is easy to implement using the border property with a value of hidden in tr. Not only the horizontal lines of the table disappear, but also the side ones. The matrix degenerates into vertical columns.
tr { border-style: hidden; }
As a last resort, they turn to! Important. If you add it after the instruction, then it will receive an additional priority.
The borders of the html table are flexible and easy to configure. The border property group allows you to hide elements, change color, width or style. The disadvantage of tables is not always the unambiguously predictable result of a combination of rules applied to a single element. In view of this, it is recommended either to reduce the number of possible styles for borders, or to apply them pointwise.