Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Borders to Tables in CSS
Borders can be easily set on a table with CSS using the border property. Specific borders can also be set, such as left border, right border, top border, etc. With that, the border style, width, colour, etc, can be set for the left, right, top, and bottom positions. For example, here, the left border is set with a different style and color compared with all the other locations −
For example, here, the top border is set with a different style and color compared with all the other locations −
Syntax
The CSS border property is used to define a border for an element. The syntax of CSS border property is as follows −
Selector {
border: /*value*/
}
Add Borders to Tables
Example
The following examples illustrate CSS border property −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>Ross Taylor</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2019</td>
</tr>
</table>
</body>
</html>
Example
Let us see another example. We have set the top, bottom , right, and left borders −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 1em;
border: 3px double green;
border-right-style: dashed;
border-left-width: 17px;
border-bottom-color: orange;
}
td {
font-size: 24px;
border-right-style: dotted;
border-width: 3px;
border-right-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>demo</td>
<td>text</td>
</tr>
<tr>
<td>goes</td>
<td>here</td>
</tr>
</table>
</body>
</html>
For a table, we can set a specific border as well. Let us see some examples.
Set the Style of the Table Border
With CSS, easily set the border style. The individual border position can also be set like left, right, top, bottom, using the following properties −
border-left-style
border-right-style
border-top-style
border-bottom-style
Example
Let us see an example to set the style of the table border. We have set the left and right style in the example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px solid black;
border-left-style: dashed;
border-right-style: dotted;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the Width of the Table Border
With CSS, easily set the border width. The individual border position can also be set like left, right, top, bottom, using the following properties −
border-left-width
border-right-width
border-top-width
border-bottom-width
Example
Let us see an example to set the width of the table border. We have set the top and bottom border width in this example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px solid black;
border-top-width: 5px;
border-bottom-width: 5px;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the Color of the Table Border
With CSS, easily set the border color. The individual border position can also be set like left, right, top, bottom, using the following properties −
border-left-color
border-right-color
border-top-color
border-bottom-color
Example
Let us see an example to set the color of the table border. We have set different colors for left, right, top and bottom borders in this example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-left-color: red;
border-right-color: green;
border-top-color: yellow;
border-bottom-color: orange;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the Left Border of a Table
Example
To set only the left border of a table, use the CSS border-left property. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-left: 8px dashed red;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the Right Border of a Table
Example
To set only the right border of a table, use the CSS border-right property. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-right: 7px dotted orange;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the top Border of a Table
Example
To set only the top border of a table, use the CSS border-top property. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-top: 7px dotted blue;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
Set the Bottom Border of a Table
Example
To set only the bottom border of a table, use the CSS border-bottom property. Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 5px solid black;
border-bottom: 7px double red;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2<Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>3</td>
</tr>
<tr>
<td>David Warner</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2023</td>
</tr>
</table>
</body>
</html>
2K+ Views
