HTML Table Borders: Learn with Various Example
In this tutorial, we will learn how to add borders around an HTML table of different styles and shapes.
Borders are the outlines of a table and also frame each individual cell within the table. CSS provides a border property that we can use to add border in table and its cells.
The general syntax to use the border shorthand property to set the border’s width, style, and color simultaneously on an element is as follows:
border: [border-width] [border-style] [border-color];
In the above syntax,
- border-width: It specifies the thickness of the border. We define it in pixels (px), ems (em), or other valid CSS units. Common values of border-width include 1px, 2px, etc.
- border-style: It defines the style of the border. Common styles include solid, dashed, dotted, double, groove, ridge, inset, and outset.
- border-color: It specifies the color of the border. This can be any valid CSS color value, such as named colors (red, blue), hex codes (#ff0000), RGB (rgb(255, 0, 0)), or RGBA (rgba(255, 0, 0, 0.5)).
Let’s take an example in which we will create borders around a table in HTML using the border property of CSS on <table>, <th>, and <td> elements.
Example 1:
<!DOCTYPE html> <html> <head> <title>HTML Table using CSS Border Property</title> <style> /* Applies a border around the entire table and its each cell */ table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Subject</th> <th>Marks Obtained</th> </tr> <tr> <td>English</td> <td>90</td> </tr> <tr> <td>Hindi</td> <td>95</td> </tr> <tr> <td>Sanskrit</td> <td>90</td> </tr> <tr> <td>Total Marks</td> <td>275</td> </tr> </table> </body> </html>
Output:
In this example, we have used the border property of CSS inside the <style> tag to create borders around the table and its each cell. The line border: 1px solid black adds a solid black border of thickness 1 pixel around the table and its each cell. As you can see in the above output, there is a space between borders of each cell.
By default, borders around each cell appear separately, but we can remove it using the border-collapse property of CSS. Let’s understand it how?
[adinserter block=”5″]
HTML Table with Collapsed Borders
To collapse borders between adjacent cells into a single border, we need to add border-collapse property of CSS in the <table> element like this:
Example: 2
table, th, td { border: 1px solid black; border-collapse: collapse; }
The line border-collapse: collapse; removes double borders between the adjacent cells and provides a cleaner look for the table. Now the output will be look something like this in the browser:
Output:
Example 3:
<!DOCTYPE html> <html> <head> <style> table { border: 2px solid black; /* Adds a solid black border around the table */ border-collapse: collapse; /* Optional: Collapses border to avoid double spacing */ } td, th { border: 1px solid black; /* Adds a solid black border around each cell */ } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>John</td> <td>Merry</td> <td>35</td> </tr> <tr> <td>Tripti</td> <td>Priya</td> <td>24</td> </tr> <tr> <td>Jack</td> <td>Herry</td> <td>28</td> </tr> </table> </body> </html>
How to Change Borders Color of HTML Table?
We can set the color of the border of a table in HTML using the CSS border-color property. We can apply directly to the <table> element to affect the outer border of the table as well as can also apply to <td> and <th> elements to color the borders of individual cells. Here’s a simple example where we will set a blue border for the table and a red border for the table cells:
[adinserter block=”2″]
Example 4:
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; border-width: 2px; /* Sets the width of the table border*/ border-style: solid; /* Sets the style of table border*/ border-color: blue; /* Sets the border color for the table.*/ } th, td { border-width: 1px; border-style: solid; border-color: red; /* Setting the border color for cells.*/ } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>John</td> <td>Merry</td> <td>35</td> </tr> <tr> <td>Tripti</td> <td>Priya</td> <td>24</td> </tr> <tr> <td>Jack</td> <td>Herry</td> <td>28</td> </tr> </table> </body> </html>
Output:
In this example, we have used individual properties for each aspect of the border. However, we can also get the same result of the above code using this approach:
<style> table { border-collapse: collapse; border: 2px solid blue; /* Sets the border color of the table to blue */ } td, th { border: 1px solid red; /* Sets the border color of cells to green */ } </style>
Additionally, we can also target specific sides of an element with properties like border-top, border-right, border-bottom, and border-left with the same shorthand values (width, style, color) to them.
How to Style Background Color of HTML Table?
CSS provides background-color property to set background color in the HTML table. We can apply this CSS property to the <td> and <th> elements to change the background color of individual cells or entire rows/columns within the table. We can also apply it to the <tr> element to set the background color for an entire row at once.
Example 5:
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; border-width: 1px; border-style: solid; border-color: black; /* Setting the border color for the table*/ } /* Sets the background color for all table header cells */ th { border-width: 1px; border-style: solid; border-color:black; background-color: #4CAF50; /* Green */ color: white; } /* Sets the background color for all table data cells */ td { border-width: 1px; border-style: solid; border-color:black; background-color: #f2f2f2; /* Light Grey */ } </style> </head> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>John</td> <td>Merry</td> <td>35</td> </tr> <tr> <td>Tripti</td> <td>Priya</td> <td>24</td> </tr> <tr> <td>Saanvi</td> <td>Gupta</td> <td>18</td> </tr> </table> </body> </html>
Output:
You can set the background color of table in HTML as you wish. However, if you set a background color of each cell, and give the border a white color, you will get the HTML table with invisible borders. Look at the below HTML code and apply it to view on the browser.
Example 6:
<style> table { border-color: white; } th { background-color: #4CAF50; /* Green */ color: white; } td { background-color: #f2f2f2; /* Light Grey */ } </style>
Round HTML Table Borders with Examples
With the border-radius property of CSS, we can round the borders of HTML table. To round the corners of the entire table, we will apply the border-radius property to the <table> element.
Example 7: Rounding the Whole Table
<style> table { border-collapse: separate; /* Necessary for border-radius to have effect */ border-spacing: 0; /* Removes the default spacing between cells */ border: 1px solid black; border-radius: 15px; /* Rounds the corners */ overflow: hidden; /* Ensures the content does not overflow the rounded corners */ } td, th { border: 1px solid black; padding: 10px; } </style>
If you want to round the borders of individual table cells, you can apply border-radius to <td> and <th> elements directly.
Example 8: Rounding Table Cells
<style> table { border-collapse: separate; border-spacing: 0; border: 1px solid black; border-radius: 8px; /* Rounds the corners */ overflow: hidden; } td, th { border: 1px solid black; padding: 10px; border-radius: 8px; /* Rounds the corners of each cell */ } </style>
Although, you can adjust the value of border-radius property according to the level of rounding you desire. Smaller values create subtle rounding, while larger values can create a more pill-like shape for the corners.
Note that you must set the border-collapse to “separate” value for the <table> element when using border-radius with tables. The collapse value can obstruct the rounding corners because it merges cell borders in a way that does not support rounded corners.
Dotted Table Borders in HTML with Example
To create dotted borders for an HTML table, we can use the border-style property in CSS. This property allows us to specify the style of the border, such as solid, dashed, or dotted. When applied to a table, you can create a visually distinct appearance around your table and its cells.
Example 9:
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; /* Use 'separate' if you want spacing between cells */ width: 100%; border: 2px dotted black; /* Dotted border for the table */ } th, td { border: 2px dotted black; /* Dotted border for table headers and data cells */ text-align: left; padding: 8px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> </body> </html>
In this example, we have used the dotted style around the table and its cells. We have used border-style: dotted; to both the <table>, <th>, and <td> elements to create a dotted outline around the table and within its cells. The border shorthand property sets the border’s width, style, and color simultaneously with values 2px dotted black border.
The following values are allowed to change the appearance around the HTML table. Use one by one to change style around the table and see the result on the browser.
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
In this tutorial, we explained how to create borders around the HTML table through the various examples. We hope that you will have understood the basic concepts of creating table borders with style, background, color and practiced all examples.