CSS Tutorial Lesson 24: Customising Tables

We can customise a table in CSS using its various properties. For example, we can use the width property to adjust the width of a table. The table properties are listed below:

Property	Description
border	to specify the border of the table, usually in pixel
border-top	to specify the top border of the table headers, usually in pixel
border-bottom	to specify the bottom border of the table headers, usually in pixel
width	to specify the width of the table, can be in pixel or percentage
padding	to specify spacing between the border of each cell and its content
background-color	to specify the background colour of the cells or the background colour of the alternating rows
:hover	to highlight a row when the mouse move on top of it
text-align	to align the text to the left or right of a cell
vertical-align	to align the content of the top position of a cell
tr:nth-child(even)	to specify different style for alternative rows, usually in terms of background colour

Table 24.1: Table Properties

We can also use other properties such as text-transform , color, text-indent , font-weight and more to customise the table further.
Example 24.1

Property	Description
border	to specify the border of the table, usually in pixel
border-top	to specify the top border of the table headers, usually in pixel
border-bottom	to specify the bottom border of the table headers, usually in pixel
width	to specify the width of the table, can be in pixel or percentage
padding	to specify spacing between the border of each cell and its content
background-color	to specify the background colour of the cells or the background colour of the alternating rows
:hover	to highlight a row when the mouse move on top of it
text-align	to align the text to the left or right of a cell
vertical-align	to align the content of the top position of a cell

Please click on Example 24.1 to view the output.