Loading Please Wait...
As we know so far that HTML tables do not have borders by default. To add a border, we have border attribute or border CSS style properties. The best way is to use CSS style.
When we add border to table, we also add border to each table cell that is <td> and <th>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>john@gmail.com</td>
</tr>
<tr>
<td>Micheal</td>
<td>micheal@gmail.com</td>
</tr>
</table>
</body>
</html>
As we can see from the example, our table has double border. This is because the one border is from table and one is from table cell that is <td> and <th>.
To overcome this we use border-collapse property.
table, th, td{
border: 1px solid #000000;
border-collapse: collapse;
}
We can use any color for border RGB, RGBA, HEX, HSL, and HSLA.
table, th, td{
border: 1px solid #ff3d4d;
border-collapse: collapse;
}
We can use any border style such as solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.
table, th, td{
border: 1px dotted #000000;
border-collapse: collapse;
}
We can use border-radius property to make rounded border.
table, th, td{
border: 1px solid #000000;
border-radius: 5px;
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved