The Border Table HTML attribute is used to apply a border in a table. We can use this attribute to apply borders around our table cells. The border table attribute in HTML highlights the border by setting the thickness where a value “0” removes the border while a higher value results in a thick border line around the table.
Any number other than “0” will result in a thick visible border line around the table. Let us know how to apply and use the border table html attribute.
Can I apply borders without using a CSS Style element?
We can easily apply borders around our table and change it to as per our desired thickness using HTML attributes. It is a very simple and easier-to-use attribute where a “0” value will remove the border effect around the table while any value (number) other than zero will affect its thickness around the table cells.
You can use different variants of the border table HTML check below.
- groove
- ridge
- hidden
- None
- dotted
- dashed
- solid
- double
Check, through a quick example, when we keep the border attribute value to 2 then the thickness of the border is as represented in the figure below.
However, when we increase the border attribute value to “4” then the border thickness will significantly increase. You can easily notice it around the table.
Let’s check for an abruptly larger value of the border i,e. 80 attributes are given below.
The border has covered the entire blank area. Well, you can check on yourself how that changes around for any random values.
Also, check What are the font families in HTML?
Border Table HTML Code Example
Check an example of the code implementation of the border table html attribute below.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <link rel=”stylesheet” href=”style.css” /> <title>Browser</title> </head> <body> <table border=”2″> <caption> Student Details </caption>
<tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> <th>Roll No</th> </tr> <tr> <td>Aman</td> <td>22</td> <td>CSE</td> <td>123</td> </tr> <tr> <td>Harsh</td> <td>21</td> <td>ECE</td> <td>456</td> </tr> <tr> <td>Ankit</td> <td>23</td> <td>CSE</td> <td>345</td> </tr> <tr> <td>Aditya</td> <td>22</td> <td>MECH</td> <td>123</td> </tr> <tr> <td>Ashutosh</td> <td>21</td> <td>CIVIL</td> <td>123</td> </tr>
</table> <script src=”script.js”></script> </body> </html> |
We can simply change the value of the border table HTML attribute as given below. Just change the number enclosed inside the border element in the <table> tag.
| <table border=”2″> //First we keep it to “2”
<table border=”2″> // Now, we changed the value of the attribute to “4” <table border=”80”> We tried “80” too. |
How to Remove Border Table HTML?
If you wish to remove the border around your table, you can simply use the border attribute inside the <table> html tag and change its value to “0”. Check the code implementation below.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <link rel=”stylesheet” href=”style.css” /> <title>Browser</title> </head> <body> <table border=”0″> <caption> Student Details </caption>
<tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> <th>Roll No</th> </tr> <tr> <td>Aman</td> <td>22</td> <td>CSE</td> <td>123</td> </tr> <tr> <td>Harsh</td> <td>21</td> <td>ECE</td> <td>456</td> </tr> <tr> <td>Ankit</td> <td>23</td> <td>CSE</td> <td>345</td> </tr> <tr> <td>Aditya</td> <td>22</td> <td>MECH</td> <td>123</td> </tr> <tr> <td>Ashutosh</td> <td>21</td> <td>CIVIL</td> <td>123</td> </tr>
</table> <script src=”script.js”></script> </body> </html> |
Output
Border Table HTML Values
You can either use any number to adjust the thickness of the border around your table cells or simply use “0” to remove the border around your table.
| Attribute Value | Description |
| Any number other than zero | Sets the border around the table based on the value given border thickness changes |
| 0 (Zero) | It removes the border around the table cells |
Collapsed Table Borders
You can prevent the appearance of the double border lines in a table. Use the “border-collapse” attribute of HTML to merge double border lines into a single border line. It displays a cleaner representation of the table.
You can use the “border-collapse” attribute inside the <head> element in HTML. You can set the collapsed border attribute using the given syntax below.
| table, th, td {
border-collapse: collapse; } |
Code Implementation
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <link rel=”stylesheet” href=”style.css” /> <title>Browser</title> <style> table, th, td { border-collapse: collapse; } </style> </head> <body> <table border=”2″> <caption> Student Details </caption>
<tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> <th>Roll No</th> </tr> <tr> <td>Aman</td> <td>22</td> <td>CSE</td> <td>123</td> </tr> <tr> <td>Harsh</td> <td>21</td> <td>ECE</td> <td>456</td> </tr> <tr> <td>Ankit</td> <td>23</td> <td>CSE</td> <td>345</td> </tr> <tr> <td>Aditya</td> <td>22</td> <td>MECH</td> <td>123</td> </tr> <tr> <td>Ashutosh</td> <td>21</td> <td>CIVIL</td> <td>123</td> </tr>
</table> <script src=”script.js”></script> </body> </html> |
Output
Round Table Borders using HTML
You can also shape the corners of your table in a round shape using the Border table html attribute. Set the value using the CSS <style> property.
| table, th, td {
border-radius: 5px; } |
Code Implementation
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <link rel=”stylesheet” href=”style.css” /> <title>Browser</title> <style> table, th, td { border-radius: 5px; } </style> </head> <body> <table border=”2″> <caption> Student Details </caption>
<tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> <th>Roll No</th> </tr> <tr> <td>Aman</td> <td>22</td> <td>CSE</td> <td>123</td> </tr> <tr> <td>Harsh</td> <td>21</td> <td>ECE</td> <td>456</td> </tr> <tr> <td>Ankit</td> <td>23</td> <td>CSE</td> <td>345</td> </tr> <tr> <td>Aditya</td> <td>22</td> <td>MECH</td> <td>123</td> </tr> <tr> <td>Ashutosh</td> <td>21</td> <td>CIVIL</td> <td>123</td> </tr> </table> <script src=”script.js”></script> </body> </html> |
Output
Dashed Table Border using HTML
You can use dashed table borders around your table. You simply need to use the “border-style” property of the CSS and convert your table borders into “dashed”.
Check the syntax of the given CSS property below.
| table, th, td {
border-style: dashed; } |
Code Implementation
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <link rel=”stylesheet” href=”style.css” /> <title>Browser</title> <style> table, th, td { border-style: dashed; } </style> </head> <body> <table border=”2″> <caption> Student Details </caption>
<tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> <th>Roll No</th> </tr> <tr> <td>Aman</td> <td>22</td> <td>CSE</td> <td>123</td> </tr> <tr> <td>Harsh</td> <td>21</td> <td>ECE</td> <td>456</td> </tr> <tr> <td>Ankit</td> <td>23</td> <td>CSE</td> <td>345</td> </tr> <tr> <td>Aditya</td> <td>22</td> <td>MECH</td> <td>123</td> </tr> <tr> <td>Ashutosh</td> <td>21</td> <td>CIVIL</td> <td>123</td> </tr>
</table> <script src=”script.js”></script> </body> </html> |
Output
Learn Full Stack Web Development with PW Skills
Become a certified full stack developer with our Full Stack Web Development Course. You will gain in-depth knowledge through interactive classes and under the guidance of an expert mentor throughout this 6-month upskilling program.
Master frontend and backend tools and frameworks while working on the real world projects. Get doubt session support, interview opportunities, certification, and much more only at pwskills.com
Recommended Course
- Generative AI Course
- Python DSA Course
- Devops Course
- UI UX Course
- Digital Marketing Course
- Product Management Course
Border Table HTML FAQs
Q1. What is the border in HTML?
Ans: Border Table HTML is used to specify a border around your table cells. You can adjust the thickness of your border by providing different values under the <table tag.
Q2. Can I apply border effects using HTML?
Ans: You can use border properties in the <table tag to apply borders around your table without using the CSS style elements.
Q3. How do I add borders in HTML?
Ans: You can use the CSS Style properties to apply different themed borders such as dashed, collapsed, solid, double, dotted in your HTML structure.
