CSS tables

The tables are written in HTML but the effects on those tables are added using CSS properties. Some of the properties used for tables are table-border, background color, padding, letter-spacing, etc.

 

Table border:

Every table in HTML is made up of rows and columns and these are separated by using borders for each cell and hence for the full table. The default color of the table border is black. But this can be changed using CSS. We can also add the width of the border and it’s type as shown in the example below.

table, th, td{ 
border: 1px solid grey;
}

In this example, 1px is the width of the border, solid is it’s style and grey it’s color. Also if we can see that the output of this example will show the table with double borders because both the table, th and td elements have separate borders. However, if we just want a border around the table then the above example can be written only for table tag as,

table{ border: 1px solid grey;}

 

Padding property:

This property is used to put some space between the table border and the contents of the table. It is used by <th> and <td> tags.

For example,

th, td{
padding: 5px;}

 

Table color:

The table can be made to look more attractive by adding color to text and the background color.

For example,

th{
color: black;
background-color: yellow;
}

 

Table width and height:

Example:

th{ height: 30px;}
Table { width: 100%;}

 

th{ height: 30px;}
Table { width: 100%;}

This property is used to align the contents of the table to left, right or center.

For example,

td{ 
text-align: right;}

 

Table hover:

This property is used to highlight a table row when the user hovers over it. For example,

tr: hover{
Background-color: grey;}