CSS Table Borders
Tables start with no borders, so you add them to the table and its cells, then collapse the doubled lines into single crisp edges.
A plain HTML table has no visible borders. You add borders to the <table>, the header cells (<th>), and the data cells (<td>). By default each of these draws its own border, so adjacent cells produce a double line.
Adding borders
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid #999;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ava</td>
<td>92</td>
</tr>
<tr>
<td>Liam</td>
<td>88</td>
</tr>
</table>
</body>
</html>Collapsing the double lines
The border-collapse property tells the browser whether neighboring cell borders should merge into one line or stay separate.
Single crisp borders
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ava</td>
<td>92</td>
</tr>
<tr>
<td>Liam</td>
<td>88</td>
</tr>
</table>
</body>
</html>Note: When you use border-collapse: separate, you can control the gap between cells with the border-spacing property, for example border-spacing: 4px.
Borders on one side only
For a lighter look, skip the full grid and draw only a bottom border on each row. This is common in data tables where horizontal rules are enough to guide the eye.
Horizontal rules only
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border-bottom: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ava</td>
<td>92</td>
</tr>
<tr>
<td>Liam</td>
<td>88</td>
</tr>
<tr>
<td>Noah</td>
<td>95</td>
</tr>
</table>
</body>
</html>
