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.

Table Borders in HTML