Lesson 24: Customising Tables

❮ Previous Lesson

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
Ranking	Name	Country
1	Rafael Nadal	Spain
2	Roger Federer	Switzerland
3	Grigor Dimitrov	Bulgaria
4	Alexander Zverev	Germany
5	Dominic Thiem	Austria
6	Marin Cilic	Crotia
7	David Goffin	Belgium
8	Jack Sock	USA
9	Stan Wawrinka	Switzerland
10	Pablo Carreno Busta	Spain

❮ Previous Lesson