JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 24: Customising Tables


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:

Table 24.1: Table Properties
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

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>
The Resulting Table
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

However, the above CSS will apply to same style to all the tables in the same page. if you wish to apply the style only to a particular table, you need to define a class for the table, as follows:

<style>
.mytable {width:90%; border: 3px solid blue;}
.mytable th, td{ padding: 3px 5px 5px 7px}
.mytable 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;}
.mytable tr:nth-child(even){background-color: cyan;}
.mytable tr:hover{ background-color: magenta;}
</style>

To apply the class to a table, use the following syntax:

<table="mytable">

Example 24.2

<table class="mytable">
<caption>ATP Ranking 2017</caption>
<tbody>
<tr>
<th>Ranking</th><th>Name</th><th>Country</th>
</tr>
<tr>
<td>1</td><td>Rafael Nadal</td><td>Spain</td>
</tr>
<tr>
<td>2</td><td>Roger Federer</td><td>Switzerland</td>
</tr>
<tr>
<td>3</td><td>Grigor Dimitrov</td><td>Bulgaria</td>
</tr>
<tr>
<td>4</td><td>Alexander Zverev</td><td>Germany</td>
</tr>
<tr>
<td>5</td><td>Dominic Thiem</td><td>Austria</td>
</tr>
<tr>
<td>6</td><td>Marin Cilic</td><td>Crotia</td>
</tr>
<tr>
<td>7</td><td>David Goffin</td><td>Belgium</td>
</tr>
<tr>
<td>8</td><td>Jack Sock</td><td>USA</td>
</tr>
<tr>
<td>9</td><td>Stan Wawrinka</td><td>Switzerland</td>
</tr>
<tr>
<td>10</td><td>Pablo Carreno Busta</td><td>Spain</td>
</tr>
</tbody>
</table>

ATP Ranking 2017
RankingNameCountry
1Rafael NadalSpain
2Roger FedererSwitzerland
3Grigor DimitrovBulgaria
4Alexander ZverevGermany
5Dominic ThiemAustria
6Marin CilicCrotia
7David GoffinBelgium
8Jack SockUSA
9Stan WawrinkaSwitzerland
10Pablo Carreno BustaSpain




Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy