If you build an HTML tables without any style then the browser displays it without a border. By using CSS, you can style the tables to improve appearance of table.
Adding Borders to Tables
With the help of CSS border property, you can define the border for tables.
The below example will set the red border for <table>, <th>, and <td> elements.
Collapsing Table Borders
In the previous example, every table cell has a separate border as well as there is some space between the borders of adjacent table cells. It is because table cell borders are separated by default. But if you are using the border-collapse property then the separate border converted into one.
It has two values: collapse and separate.
Border Spacing
This property specifies the space between the borders of adjacent cells.
Table Width and Height
To control the table width and height, use the CSS width and height property.
Caption Side
The caption-side property is used to set the position of content of an <caption> element.
It has the following values: top, bottom, left, right.
Horizontal and Vertical Alignment
By using text-align property, you can horizontally align the content in <th> or <td>. It has the following values: left, right, and center.
And by using vertical-align property, you can vertically align the content in <th> or <td>. It has the values: top, bottom, and middle.
Empty Cells
The empty-cells property which used to defines whether a cell without any content should have a border displayed.
It has the following values- show, hide or inherit.
By using the empty-cells property, you can hide borders of empty cells in the
element.Table Layout
This property defines the algorithm to be used to lay out the table cells, rows, and columns.
This property can have the following values: fixed, auto or inherit.
Horizontal Dividers
By using border-bottom property to <th> and <td>, you can add horizontal dividers.
Striped Tables
For striped tables, use the nth-child() selector and add a background-color to all odd (or even) table rows.
Table Color
With the help of background-color and color property, you can change the color of the table elements.
The below example shows how to change the background color of the <th> element.