March 19, 2024
How can I add different types of borders to the table?We can add many types of borders to the table. But we need to use CSS in the table. I used internal CSS here. Let's start to add various types of borders.
Simple Border
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Table</title>
<style>
table, th, td {
border: 1px solid pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Roll no.</th>
<th>Student Names</th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark Dyol</td>
<td> 99 </td>
</tr>
<tr>
<td> 2 </td>
<td> John Smith </td>
<td> 95 </td>
</tr>
<tr>
<td> 3 </td>
<td> Remi Snap </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
In the above example, a border was added in the table, td, th. Let's understand border properties.
1px: This is the width of the borderline.
solid: This is a border style.
pink: This is the color of the borderline.
You can give all these styles differently. For that, you have to use properties like border, border-style, and border-color. Let's look at them one by one.
Border style
Using the border-style property we can set the many types of border styles.
List of border styles
- solid
- dashed
- dotted
- double
- groove
- ridge
- inset
- outset
- hidden
- none
Let's see the example of the dashed style.
<style>
table, th, td {
border: 1px pink;
border-radius: 5px;
}
th, td {
border-style: dashed;
}
</style>
Border Color
For Border color, we can use the border-color property.
<style>
table, th, td {
border: 1px solid;
border-color: blue;
}
</style>
Border Collapsed
Border Collapsed helps to avoid the double border. use only border-collapse property.
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
</style>
Rounded Border
Border radius helps to give a radius to your table border.
<style>
table, th, td {
border: 1px solid pink;
border-radious: 5px
}
</style>