Advertisement

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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.