HTML Table Borders
We can specify different types of borders for a HTML table, and its cells.
CSS border
property is used to specify the border width, style, and color. CSS border-collapse
property is used to collapse the border or not.
Refer CSS border property tutorial for more styles and colors.
Examples
Basic Border for Table
In the following example, we specify a border with 1px width, solid style, and red color.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Collapse Border
In the previous example, there is a border drawn for cells, and table separately. We can collapse the double looking lines into one using CSS border-collapse
property.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Dashed Border for Table
In the following example, we set the border-style
to dashed via CSS border
property.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px dashed red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Conclusion
In this HTML Tutorial, we learned about HTML Table Borders, how to specify the border width, style, and color, and border collapsing information, with examples.