CSS Tables
The CSS can also be applied to HTML tables. Without any delay, below are some properties which can make an ordinary looking table into an attractive one:
CSS Table Properties
- border
- border-collapse
- padding
- width
- text-align
- color
- background color
CSS Table Border
Table borders can be set for the table, th and td tags using the border
property.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Border </title>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Add a border to a table with CSS:</h3>
<table style=" border: 1px solid black; width:50%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Marks</th>
</tr>
<tr>
<td>Mohit</td>
<td>Negi</td>
<td>97%</td>
</tr>
<tr>
<td>John</td>
<td>Snow</td>
<td>99%</td>
</tr>
<tr>
<td>Peter</td>
<td>Dinklage</td>
<td>89%</td>
</tr>
<tr>
<td>Arya</td>
<td>Stark</td>
<td>95%</td>
</tr>
<tr>
<td>Ned</td>
<td>Stark</td>
<td>55%</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Border
| Firstname |
Lastname |
Marks |
| Mohit |
Negi |
97% |
| John |
Snow |
99% |
| Peter |
Dinklage |
89% |
| Arya |
Stark |
95% |
| Ned |
Stark |
55% |
Table Border Collapse
By default, the borders are displayed as a thick one with double borders. The border-collapse property specify
that the borders should be collapsed into a single border.
Look at the example below to understand it properly:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Border Collapse </title>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 50%;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Let the borders collapse:</h3>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Marks</th>
</tr>
<tr>
<td>Mohit</td>
<td>Negi</td>
<td>97%</td>
</tr>
<tr>
<td>John</td>
<td>Snow</td>
<td>99%</td>
</tr>
<tr>
<td>Peter</td>
<td>Dinklage</td>
<td>89%</td>
</tr>
<tr>
<td>Arya</td>
<td>Stark</td>
<td>95%</td>
</tr>
<tr>
<td>Ned</td>
<td>Stark</td>
<td>55%</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Border Collapse
| Firstname |
Lastname |
Marks |
| Mohit |
Negi |
97% |
| John |
Snow |
99% |
| Peter |
Dinklage |
89% |
| Arya |
Stark |
95% |
| Ned |
Stark |
55% |
Note : If a !DOCTYPE is not specified, the border-collapse property can produce
unexpected results in IE8 and earlier versions.
Table Padding
Padding creates space between the border and the cells of the table.
Table padding is not a special padding for tables it's the normal CSS padding that is used in the table example below.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Padding </title>
<meta charset="UTF-8">
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>
<table style="width: 100%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>Snow</td>
<td>99%</td>
</tr>
<tr>
<td>Peter</td>
<td>Dinklage</td>
<td>89%</td>
</tr>
<tr>
<td>Arya</td>
<td>Stark</td>
<td>95%</td>
</tr>
<tr>
<td>Ned</td>
<td>Stark</td>
<td>55%</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Padding
| Firstname |
Lastname |
Marks |
| John |
Snow |
99% |
| Peter |
Dinklage |
89% |
| Arya |
Stark |
95% |
| Ned |
Stark |
55% |
Table Width and Height
As the name suggests, width and height of a table are defined by the width and height properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Height and Width </title>
<meta charset="UTF-8">
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Height and Width
| Firstname |
Lastname |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
| Cleveland |
Brown |
$250 |
Text Alignment
Horizontal Alignment
The text-align property is used to set the horizontal alignment of the content in <th> or
<td> tags. The possible values can be - left, right, center.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Text Alignment </title>
<meta charset="UTF-8">
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th{
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th style="text-align: center;">Firstname</th>
<th style="text-align: center;">Lastname</th>
<th style="text-align: center;">Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Text Alignment
| Firstname |
Lastname |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
| Cleveland |
Brown |
$250 |
Vertical Alignment
The vertical-align property is used to set the vertical alignment of the content in <th> or <td>
tags. The possible values can be - top, bottom, or middle.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Vertical Alignment </title>
<meta charset="UTF-8">
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
#tablec{
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h3>The vertical-align Property</h3>
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr id="tablec">
<t
d>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr id="tablec">
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr id="tablec">
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr id="tablec">
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Vertical Alignment
| Firstname |
Lastname |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
| Cleveland |
Brown |
$250 |
Table Color
Table background-color can be changed by using usual CSS properties like background-color and can also change
the text color by using color property.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Color </title>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
}
#color {
background-color: seagreen;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th id="color">Firstname</th>
<th id="color">Lastname</th>
<th id="color">Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Color
| Firstname |
Lastname |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
| Cleveland |
Brown |
$250 |
Hoverable Table
Hover can also be used in tables to highlight cells or rows on mouseover.
Look at the example below to understand it properly:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Table Hover </title>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid gray;
}
tr:hover{ background-color:seagreen }
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Hover
| First Name |
Last Name |
Points |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
| Cleveland |
Brown |
$250 |