Hello Devs,
In this tutorial, we will learn CSS table
If we are going to create a table in HTML without adding any of the code in CSS then the browser will show the table without any border.
By using CSS we can clearly significatly imporve the look and feel of a table.
Table Border:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Lewis</td>
<td>Deo</td>
</tr>
</table>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Lewis</td>
<td>Deo</td>
</tr>
</table>
</body>
</html>
Table Height & Width By using the height and width property
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 40px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td>Divya</td>
<td>001</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Hritika</td>
<td>002</td>
<td>Pune</td>
</tr>
</table>
</body>
</html>
Adjusting Space inside Tables
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td>Divya</td>
<td>001</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Hritika</td>
<td>002</td>
<td>Pune</td>
</tr>
</table>
</body>
</html>
Horizontal Alignment
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th class="left">Firstname</th>
<th>Lastname</th>
<th class="right">Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="right">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td class="right">$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="right">$300</td>
</tr>
<td>Cleveland</td>
<td>Brown</td>
<td class="right">$250</td>
</tr>
</table>
</body>
</html>
Vertical Alignment
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
.bottom_align {
height: 50px;
vertical-align: bottom;
}
.top_align {
height: 50px;
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td class="bottom_align">Divya</td>
<td class="bottom_align">001</td>
<td class="bottom_align">Mumbai</td>
</tr>
<tr>
<td class="top_align">Hritika</td>
<td class="top_align">002</td>
<td class="top_align">Pune</td>
</tr>
</table>
</body>
</html>
Table Color
Add bg color and text to table:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
border: 1px solid grey;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td class="bottom_align">Divya</td>
<td class="bottom_align">001</td>
<td class="bottom_align">Mumbai</td>
</tr>
<tr>
<td class="top_align">Hritika</td>
<td class="top_align">002</td>
<td class="top_align">Pune</td>
</tr>
</table>
</body>
</html>Table Border:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Lewis</td>
<td>Deo</td>
</tr>
</table>
</body>
</html>
The border-collapse property is used to collapse the border into a single border.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Lewis</td>
<td>Deo</td>
</tr>
</table>
</body>
</html>
Table Height & Width By using the height and width property
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 40px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td>Divya</td>
<td>001</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Hritika</td>
<td>002</td>
<td>Pune</td>
</tr>
</table>
</body>
</html>
Adjusting Space inside Tables
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td>Divya</td>
<td>001</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Hritika</td>
<td>002</td>
<td>Pune</td>
</tr>
</table>
</body>
</html>Horizontal Alignment The text-align property
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th class="left">Firstname</th>
<th>Lastname</th>
<th class="right">Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="right">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td class="right">$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="right">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td class="right">$250</td>
</tr>
</table>
</body>
</html>
Vertical Alignment
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
.bottom_align {
height: 50px;
vertical-align: bottom;
}
.top_align {
height: 50px;
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td class="bottom_align">Divya</td>
<td class="bottom_align">001</td>
<td class="bottom_align">Mumbai</td>
</tr>
<tr>
<td class="top_align">Hritika</td>
<td class="top_align">002</td>
<td class="top_align">Pune</td>
</tr>
</table>
</body>
</html>
Table Color
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
border: 1px solid grey;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>City</th>
</tr>
<tr>
<td class="bottom_align">Divya</td>
<td class="bottom_align">001</td>
<td class="bottom_align">Mumbai</td>
</tr>
<tr>
<td class="top_align">Hritika</td>
<td class="top_align">002</td>
<td class="top_align">Pune</td>
</tr>
</table>
</body>
</html>
May this example help you.