HTML <table> border Attribute
The HTML <table> border Attribute is used to specify the border of a table. It sets the border around the table cells. This attribute defines the visual presentation of the table by setting the thickness of the borders. A higher value results in a thicker border. Alternatively, setting the border
attribute to “0” removes the borders entirely.
Note: The border attribute is not supported by HTML5.
Syntax:
<table border="1 | 0">
Attribute Values:
Attribute Values |
Description |
---|---|
1 or Any Number |
It sets the border around the table cells. |
0 |
It removes (not set) the border around the table cells. |
Example: The implementation of border around a table with an example.
html
<!DOCTYPE html> < html > < head > < title > HTML table border Attribute </ title > < style > body { text-align: center; } table { margin: 0 auto; height: 20vh; width: 40vh; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML table border Attribute</ h2 > < table border = "1" > < caption > Author Details </ caption > < tr > < th >NAME</ th > < th >AGE</ th > < th >BRANCH</ th > </ tr > < tr > < td >BITTU</ td > < td >22</ td > < td >CSE</ td > </ tr > < tr > < td >RAM</ td > < td >21</ td > < td >ECE</ td > </ tr > </ table > </ body > </ html > |
Output:
Table of Content
- Collapsed Table Borders
- Round Table Borders
- Dashed Table Borders
Collapsed Table Borders
To prevent the appearance of double borders in a table, you can use the CSS property ‘border-collapse’ and set it to “collapse.” By doing so, the borders within the table will merge into a single border, providing a cleaner and more unified visual presentation.
Syntax:
table, th, td {
border-collapse: collapse;
}
Example: The implementation of collapsed border around a table with an example.
HTML
<!DOCTYPE html> < html > < head > < title > HTML table border Attribute </ title > < style > body { text-align: center; } table { margin: 0 auto; height: 20vh; width: 40vh; } table, th, td { border-collapse: collapse; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML table border Attribute</ h2 > < table border = "1" > < caption > Author Details </ caption > < tr > < th >NAME</ th > < th >AGE</ th > < th >BRANCH</ th > </ tr > < tr > < td >BITTU</ td > < td >22</ td > < td >CSE</ td > </ tr > < tr > < td >RAM</ td > < td >21</ td > < td >ECE</ td > </ tr > </ table > </ body > </ html > |
Output:
Round Table Borders
For rounded table borders, apply the CSS ‘border-radius‘ property to the table element with a specified radius value, creating a visually appealing circular border effect.
Syntax:
table, th, td {
border-radius: 10px;
}
Example: The implementation of rounded border around a table
HTML
<!DOCTYPE html> < html > < head > < title > HTML table border Attribute </ title > < style > body { text-align: center; } table { margin: 0 auto; height: 20vh; width: 40vh; } table, th, td { border-radius: 15px; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML table border Attribute</ h2 > < table border = "1" > < caption > Author Details </ caption > < tr > < th >NAME</ th > < th >AGE</ th > < th >BRANCH</ th > </ tr > < tr > < td >BITTU</ td > < td >22</ td > < td >CSE</ td > </ tr > < tr > < td >RAM</ td > < td >21</ td > < td >ECE</ td > </ tr > </ table > </ body > </ html > |
Output:
Dashed Table Borders
To use dashed table borders, use the CSS ‘border-style’ property and set it to “dashed” for the desired table cells. You can also use dotted
, dashed
, solid
, double
, groove
, ridge
, hidden , none
etc.
Syntax:
table, th, td {
border-style: dashed;
}
Example: The implementation of dashed border around a table
HTML
<!DOCTYPE html> < html > < head > < title > HTML table border Attribute </ title > < style > body { text-align: center; } table { margin: 0 auto; height: 20vh; width: 40vh; } table, th, td { border-style: dashed; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >HTML table border Attribute</ h2 > < table border = "1" > < caption > Author Details </ caption > < tr > < th >NAME</ th > < th >AGE</ th > < th >BRANCH</ th > </ tr > < tr > < td >BITTU</ td > < td >22</ td > < td >CSE</ td > </ tr > < tr > < td >RAM</ td > < td >21</ td > < td >ECE</ td > </ tr > </ table > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 12.1
- Safari 1