The look of an HTML table can be greatly improved with CSS.
The border-collapse property specifies whether the table borders are collapsed inta a single border or separated as default. If the vorders are separate, the border-spacing property can be used to change the spacing.
| Red | Green |
| Blue | Yellow |
| Course name | Lesson | Quizzes |
|---|---|---|
| C++ | 81 | 36 |
| JavaScript | 48 | 144 |
| HTML | 38 | 119 |
| CSS | 70 | 174 |
The empty-cells property specifies whether or not display border and background on empty cells in a table.
show: the borders of an empty cell are rendered hide: the borders of an empty cell are not drawn Here is the empty-cells property that is used to hide borders of empty cells in the table element.
| HTML | CSS |
| JavaScript |
The table-layout specifies how the width of table columns is calculated. The possible values are: auto - when column or cell width are not explicitly set, the column width will be in proportion to the amount of content in the cells that make up the column fixed - when column or cell width are not explicitly set, the column width will not be affected by the amount of content in the cells that make up the column.
The table layout is set to auto by default. The example below shows the difference between auto and fixed.
Table-layout is set to auto
| 500.000.000.000.000 | 20.000 |
Table-layout is set to fixed
| 500.000.000.000.000 | 20.000 |