HTML Table Border

❮ PreviousNext ❯

By default, web browsers don't apply borders to HTML tables. We will have to add the CSS style to <table> element to make a border around it.

For example, the table below has borders around the table and table cells.

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka

The CSS Style for the same is as follows:

HTML Code
<style>

table, th, td {
 border: 1px solid black;
}

</style>
Complete Example
<!DOCTYPE html>
<html>
<head>

<title>HTML Table Border Example</title>

<style>

table, td, th {
border:1px solid black;
}

</style>
<head>
</head>
<body>

<h1>HTML Table Border Example</h1>

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Run</th>
<th>Team</th>
</tr>
<tr>
<td>1</td>
<td>Sachin Ramesh Tendulkar</td>
<td>18426</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Kumar Chokshanada Sangakkara</td>
<td>14234</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>3</td>
<td>Ricky Thomas Ponting</td>
<td>13704</td>
<td>Australia</td>
</tr>
<tr>
<td>4</td>
<td>Sanath Teran Jayasuriya</td>
<td>13430</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>5</td>
<td>Denagamage Proboth Mahela de Silva Jayawardene</td>
<td>12650</td>
<td>Sri Lanka</td>
</tr>
</table>

<p>The table above has borders. We have set it by applying internal CSS. Remove the style element with all its content and see the table display.</p>

</body>
</html>

Border Collapse

In the example above, you noticed double borders around the cell. To avoid such a view, we can use the CSS border-collapse property.

The value of the property will be set to collapse.

See the table with border collapse property.

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}

</style>
Complete Example
<!DOCTYPE html>
<html>
<head>

<title>HTML Table Border collapse Example</title>

<style>

table, td, th {
border:1px solid black;
border-collapse:collapse;
}

</style>
<head>
</head>
<body>

<h1>Table Border collapse Example</h1>

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Run</th>
<th>Team</th>
</tr>
<tr>
<td>1</td>
<td>Sachin Ramesh Tendulkar</td>
<td>18426</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Kumar Chokshanada Sangakkara</td>
<td>14234</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>3</td>
<td>Ricky Thomas Ponting</td>
<td>13704</td>
<td>Australia</td>
</tr>
<tr>
<td>4</td>
<td>Sanath Teran Jayasuriya</td>
<td>13430</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>5</td>
<td>Denagamage Proboth Mahela de Silva Jayawardene</td>
<td>12650</td>
<td>Sri Lanka</td>
</tr>
</table>

<p>The value of the CSS border-collapse property is set to collapse to avoid double border effect around the table cells.</p>

</body>
</html>

Table Border Color

The border of an HTML table can be coloured using the CSS border-color property.

For example, the below table has teal color border.

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border: 5px solid;
 border-collapse: collapse;
 border-color: teal;
}

</style>
Complete Example
<!DOCTYPE html>
<html>
<head>

<title>Table Border Color Example</title>

<style>

table, td, th {
border: 5px solid;
border-collapse:collapse;
border-color:teal;
}

</style>
<head>
</head>
<body>

<h1>Table Border Color Example</h1>

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Run</th>
<th>Team</th>
</tr>
<tr>
<td>1</td>
<td>Sachin Ramesh Tendulkar</td>
<td>18426</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Kumar Chokshanada Sangakkara</td>
<td>14234</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>3</td>
<td>Ricky Thomas Ponting</td>
<td>13704</td>
<td>Australia</td>
</tr>
<tr>
<td>4</td>
<td>Sanath Teran Jayasuriya</td>
<td>13430</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>5</td>
<td>Denagamage Proboth Mahela de Silva Jayawardene</td>
<td>12650</td>
<td>Sri Lanka</td>
</tr>
</table>

<p>The value of the CSS border-color property is set to teal. Change it to some other colors and see the result. You can write color by name, RGB, HEX and HSL value.</p>

</body>
</html>

Table Background Color

The table below has a background color applied. We have achieved that style using the CSS background-color property.

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border: 2px solid white;
 border-collapse: collapse;
 background-color: #009cb2;
}

</style>
Complete Example
<!DOCTYPE html>
<html>
<head>

<title>Table background Color Example</title>

<style>

table, td, th {
border:2px solid white;
border-collapse:collapse;
background-color:#009cb2;
}

</style>
<head>
</head>
<body>

<h1>Table background Color Example</h1>

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Run</th>
<th>Team</th>
</tr>
<tr>
<td>1</td>
<td>Sachin Ramesh Tendulkar</td>
<td>18426</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Kumar Chokshanada Sangakkara</td>
<td>14234</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>3</td>
<td>Ricky Thomas Ponting</td>
<td>13704</td>
<td>Australia</td>
</tr>
<tr>
<td>4</td>
<td>Sanath Teran Jayasuriya</td>
<td>13430</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>5</td>
<td>Denagamage Proboth Mahela de Silva Jayawardene</td>
<td>12650</td>
<td>Sri Lanka</td>
</tr>
</table>

<p>The table background has been set with color #009cb2. Border Color is set to white.</p>

</body>
</html>

Round Table Border

The CSS border-radius property is used to set rounded table borders.

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border: 2px solid black;
 border-radius: 12px;
}

</style>
Complete Example
<!DOCTYPE html>
<html>
<head>

<title>Rounded Table Example</title>

<style>

table, td, th {
border:2px solid black;
border-radius: 12px;
}

</style>
<head>
</head>
<body>

<h1>Rounded Table Example</h1>

<table>
<tr>
<th>No</th>
<th>Name</th>
<th>Run</th>
<th>Team</th>
</tr>
<tr>
<td>1</td>
<td>Sachin Ramesh Tendulkar</td>
<td>18426</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Kumar Chokshanada Sangakkara</td>
<td>14234</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>3</td>
<td>Ricky Thomas Ponting</td>
<td>13704</td>
<td>Australia</td>
</tr>
<tr>
<td>4</td>
<td>Sanath Teran Jayasuriya</td>
<td>13430</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>5</td>
<td>Denagamage Proboth Mahela de Silva Jayawardene</td>
<td>12650</td>
<td>Sri Lanka</td>
</tr>
</table>

<p>To have a rounded border table we have set the border-radius to 12px. Change the value of the border-radius and see the result.</p>

</body>
</html>

Table Border Styles

We can use the CSS border-style property to give different types of styles to the border, like dashed, dotted, double, groove, hidden, inset, none, ridge, solid etc.

Dashed Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: dashed;
 border-width: 5px;
}

</style>

Dotted Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: dotted;
 border-width: 5px;
}

</style>

Double Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: double;
 border-width: 5px;
}

</style>

Groove Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: groove;
 border-width: 5px;
}

</style>

Hidden Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: hidden;
}

</style>

Inset Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: inset;
 border-width: 5px;
}

</style>

Solid Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: solid;
 border-width: 5px;
 border-color: black;
}

</style>

Ridge Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: ridge;
 border-width: 5px;
}

</style>

Outset Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: outset;
 border-width: 5px;
}

</style>

None Table Border

No Name Run Team
1 Sachin Ramesh Tendulkar 18426 India
2 Kumar Chokshanada Sangakkara 14234 Sri Lanka
3 Ricky Thomas Ponting 13704 Australia
4 Sanath Teran Jayasuriya 13430 Sri Lanka
5 Denagamage Proboth Mahela de Silva Jayawardene 12650 Sri Lanka


HTML Code
<style>

table, th, td {
 border-collapse: collapse;
 border-style: none;
}

</style>
❮ PreviousNext ❯
1. HTML Tutorial
2. Introduction to HTML
3. Basic HTML Page
4. HTML Editors
5. Web Browser
6. HTML History
7. Basic HTML Tags
8. HTML Elements
9. HTML Attributes
10. HTML Headings
11. HTML Paragraphs
12. HTML Text Formatting
13. HTML Styles
14. HTML Comment
15. HTML Quotation
16. HTML Colors
17. HTML RGB Colors
18. HTML HEX Colors
19. HTML HSL Color
20. HTML CSS
21. HTML Links
22. HTML Link Colors
23. Link within Page
24. HTML Images
25. HTML Background Image
26. HTML Image Map
27. HTML Picture Element
28. HTML Favicon
29. HTML Table
30. HTML Table Border
31. HTML Table Size

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.