HTML Table borders
➔ Border can be set on <table>, <tr>, <th> and <td>
➔ Multiple border applied on table may cause showing duplicate border, and this can be prevented by border-collapse property.
➔ border-collapse="collapse" collapse multiple borders into a single border.
Syntax
<!--CSS-->
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
</style>
<!--HTML-->
<table >
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
Birds Table
| Name | Found in significant numbers |
|---|---|
| Bald Eagle | United States |
| Peacock | India |
| Emu | Australia |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
HTML Example 1
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Birds Table</h2>
<table class="table1">
<thead>
<tr>
<th>Name</th>
<th>Found in significant numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bald Eagle</td>
<td>United States</td>
</tr>
<tr>
<td>Peacock</td>
<td>India</td>
</tr>
<tr>
<td>Emu</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</body>
</html>
Click on the "See output" button to see how it works.