View video tutorial
CSS Tables Border
CSS
An HTML table can have borders of different styles and sizes by applying CSS.
CSS Table border.
➔ By default, html tables, th and td have no borders
➔ To create a single clean border, use the border-collapse property on the table element.
Syntax
table { border-collapse: collapse; }
table, td, th { border: 1px solid #d5d5d5; }
CSS border examples on tables
| CSS | Meaning |
|---|---|
| table{ border: 1px solid #d5d5d5; } | Border on the table. |
| th { border: 1px solid #d5d5d5; } | Border on the th. |
| td{ border: 1px solid #d5d5d5; } | Border on the td. |
| td, th { border: 1px solid #d5d5d5; } | Border on the td and th. |
| table, td, th { border: 1px solid #d5d5d5; } | Border on the table, td and th. |
| table, td, th { border: 1px solid #d5d5d5; border-radius:10px; } | Rounded border on the table, td and th |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 10pt;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 2px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<h3>CSS Table Example</h3>
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elias</td>
<td>Fischer</td>
<td>Male</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td>Maria</td>
<td>Petrov</td>
<td>Female</td>
<td></td>
<td>Bulgaria</td>
</tr>
<tr>
<td>Wang</td>
<td>Zihan</td>
<td>Male</td>
<td></td>
<td>China</td>
</tr>
<tr>
<td>Li</td>
<td>Kexin</td>
<td>Female</td>
<td></td>
<td>China</td>
</tr>
<tr>
<td>Zhang</td>
<td>Yichen</td>
<td>Male</td>
<td></td>
<td>China</td>
</tr>
<tr>
<td>Amelia</td>
<td>Novak</td>
<td>Female</td>
<td></td>
<td>Czech Republic</td>
</tr>
<tr>
<td>Lucas</td>
<td>Martin</td>
<td>Male</td>
<td></td>
<td>France</td>
</tr>
<tr>
<td>Gabriel</td>
<td>Lefebvre</td>
<td>Male</td>
<td></td>
<td>France</td>
</tr>
<tr>
<td>Alexander</td>
<td>Müller</td>
<td>Male</td>
<td></td>
<td>Germany</td>
</tr>
<tr>
<td>Emilia</td>
<td>Wagner</td>
<td>Female</td>
<td></td>
<td>Germany</td>
</tr>
<tr>
<td>Viktor</td>
<td>Orbán</td>
<td>Male</td>
<td></td>
<td>Hungary</td>
</tr>
<tr>
<td>Aarush</td>
<td>Agarwal</td>
<td>Male</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Navika</td>
<td>Jain</td>
<td>Female</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Shaurya</td>
<td>Singh</td>
<td>Male</td>
<td></td>
<td>India</td>
</tr>
<tr>
<td>Isabella</td>
<td>Murphy</td>
<td>Female</td>
<td></td>
<td>Ireland</td>
</tr>
<tr>
<td>Sara</td>
<td>Meloni</td>
<td>Female</td>
<td></td>
<td>Italy</td>
</tr>
<tr>
<td>Sofia</td>
<td>Rossi</td>
<td>Female</td>
<td></td>
<td>Italy</td>
</tr>
<tr>
<td>Maya</td>
<td>Mizrahi</td>
<td>Female</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Avigail</td>
<td>Golan</td>
<td>Female</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>David</td>
<td>Cohen</td>
<td>Male</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Ari</td>
<td>Levi</td>
<td>Male</td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Sato</td>
<td>Haru</td>
<td>Male</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Suzuki</td>
<td>Himari</td>
<td>Female</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Takahashi</td>
<td>Nagi</td>
<td>Male</td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Liam</td>
<td>Hansen</td>
<td>Male</td>
<td></td>
<td>Norway</td>
</tr>
<tr>
<td>Daniel</td>
<td>Kowalski</td>
<td>Male</td>
<td></td>
<td>Poland</td>
</tr>
<tr>
<td>Emma</td>
<td>Silva</td>
<td>Female</td>
<td></td>
<td>Portugal</td>
</tr>
<tr>
<td>Mark</td>
<td>Volkov</td>
<td>Male</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Mia</td>
<td>Volkova</td>
<td>Female</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Leo</td>
<td>Sokolov</td>
<td>Male</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Alisa</td>
<td>Morozova</td>
<td>Female</td>
<td></td>
<td>Russia</td>
</tr>
<tr>
<td>Jasmina</td>
<td>Horák</td>
<td>Female</td>
<td></td>
<td>Slovakia</td>
</tr>
<tr>
<td>Matteo</td>
<td>García</td>
<td>Male</td>
<td></td>
<td>Spain</td>
</tr>
<tr>
<td>Hanna</td>
<td>Johansson</td>
<td>Female</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Elisabeth</td>
<td>Thunberg</td>
<td>Female</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Noah</td>
<td>Schneider</td>
<td>Male</td>
<td></td>
<td>Switzerland</td>
</tr>
<tr>
<td>David</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>David</td>
<td>Jones</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>George</td>
<td>Taylor</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Arthur</td>
<td>Brown</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Harry</td>
<td>Wilson</td>
<td>Male</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Emily</td>
<td>Taylor</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Sarah</td>
<td>Johnson</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Daisy</td>
<td>Jones</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Olivia</td>
<td>Williams</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Sophie</td>
<td>Brown</td>
<td>Female</td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Olivia</td>
<td>Jones</td>
<td>Female</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>David</td>
<td>Brown</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Sarah</td>
<td>Williams</td>
<td>Female</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Michael</td>
<td>Taylor</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.