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:
HTML 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.