How to Add Border to HTML Table. To add a border to an HTML <table>, first, you need to know how to create an HTML table. In HTML, you can create tables by using the tags in connection with the <td>, <tr>, <th>, table tags.
Creating a border for the HTML table
After designing an HTML table, you need to add a border to it to look like something well, as borders are not added by default. First, let’s see an instance, where we use the HTML border attribute
Example of creating an HTML table with the border attribute by using CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Soft CodeOn</title>
<style>
table {border-style: ridge;border-width: 140px;border-color: #8edf82;background-color: #d9e9d9;}
th {border: 5px solid #092484;}
td {border: 20px groove #1c57c9;}
</style></head>
<body>
<table><tr>
<th>Person</th>
<th>Marks</th>
</tr><tr>
<td>Rauf</td>
<td>99</td>
</tr><tr>
<td>Ali</td>
<td>98</td>
</tr>
</table>
</body>
</html>If you don’t need the border to go all throughout the table or if you want distinct borders on each side of the table, you can use any of the following properties: border-left, border-right, border-bottom, and border-top.
Add border to HTML table (bottom):
<!DOCTYPE html>
<html>
<head>
<title>Soft CodeOn</title>
<style>
table {border-collapse: collapse;}
td,th {padding: 10px;border-bottom: 4px solid #8ebf42;text-align: center;}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Marks</th>
</tr><tr>
<td>Rauf</td>
<td>99</td>
</tr><tr>
<td>Ali</td>
<td>98</td>
</tr>
</table>
</body>
</html>Create Rounded borders
You can also do rounded borders by applying the CSS border-radius property. Retrieve that in this case, you should remove the border-collapse property to work properly. Let’s view an example where all the table parts are rounded.
<!DOCTYPE html>
<html>
<head>
<title>Soft CodeOn</title>
<style>
table,td,th {padding: 12px;border: 2.5px solid #1c87c9;border-radius: 5px;background-color: #e5e5e5;text-align: center; }
</style></head>
<body><table>
<tr>
<th>Person</th>
<th>Marks</th>
</tr><tr>
<td>Rauf</td>
<td>99</td>
</tr><tr>
<td>Ali</td>
<td>98</td>
</tr>
</table>
</body>
</html>If you need to have a rounded border on paragraphs, follow the sample below to learn how to do it. Use the border-radius property to have your preferred outcome.
Example of creating rounded borders on paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {padding: 10px;}
p.soft {border: 2px solid #1c87c9;}
p.soft1 {border: 2px solid #1c87c9;border-radius: 5px;}
p.soft2 {border: 2px solid #1c87c9;border-radius: 8px;}
p.soft3 {border: 2px solid #1c87c9;border-radius: 12px;}
</style></head><body>
<h2>Rounded borders</h2>
<p class="soft">soft border</p>
<p class="soft1">Round border</p>
<p class="soft2">Rounder border</p>
<p class="soft3">Roundest border</p>
</body>
</html>
What’s up, just wanted to mention, I liked this article.
It was practical. Keep on posting!