Advertisement


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




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »