CSS Tutorial Lesson 24: Customising Tables

Share

[Lesson 23]<<[Contents]

We can customize 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 color of the cells or the background color 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 a different style for alternative rows, usually in terms of background color

Table 24.1: Table Properties

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

Example 24.1
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table {width:90%; border: 2px solid blue;}
th, td{ padding: 3px 5px 5px 7px}
th{ font-size:110%; text-transform: uppercase; font-weight:bold; border -top: 2 px solid  #cc669;
border-bottom: 2 px solid #cc0000;
vertical-align:top;}
tr:nth-child(even){background-color: cyan;}
tr:hover{ background-color: magenta;}
</style>
</head>
<body>

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

</body>

</html>

Please click on Example 24.1 to view the output.

 [Lesson 23]<<[Contents]

Share