Back to: HTML Tutorials
Table Borders in HTML with Examples
In this article, I am going to discuss Table Borders in HTML with Examples. Please read our previous article where we discussed Tables in HTML with Examples. At the end of this article, you will learn everything about HTML Table Border with Examples.
HTML Table Borders
In HTML, we can add borders around the table and style them according to our needs. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
To border around the table and cells we have used CSS border property. When you run the above HTML code, you will get the following output in the browser.
Collapsed Table Borders in HTML
If we don’t want double borders like in the example above, we can set the value of border-collapse property to collapse. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Styled Table Borders in HTML
We can change the background color of each cell as well as border color using CSS. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid slateblue;
background-color:aliceblue;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Round Table Borders in HTML
With CSS border-radius property we can change the corner of the border to rounded. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
background-color:lightgreen;
border-radius:5px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Dotted Table Borders in HTML
With the CSS border-style property we can set the appearance of the border. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
background-color:lightgray;
padding:10px;
border-collapse:collapse;
border-style:dotted;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Age</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>John Einstein</td>
<td>14</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Grace Olive</td>
<td>15</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Andy Roberts</td>
<td>15</td>
<td>Fail</td>
</tr>
</table>
</body>
</html>
Dashed
Dotted
In the next article, I am going to discuss Table Sizes in HTML with Examples. Here, in this article, I try to explain Table Borders in HTML with Examples and I hope you enjoy this HTML Table Borders with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Thanks