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:
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 >GeeksforGeeks</ 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:
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 >GeeksforGeeks</ 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 >GeeksforGeeks</ 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 >GeeksforGeeks</ 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
Last Updated :
17 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...