Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Adding Borders to Tables in CSS
Adding borders to tables in CSS allows you to create visually appealing and well-structured table layouts. You can apply borders to the entire table or customize individual sides with different styles, widths, and colors.
Syntax
table {
border: width style color;
}
/* Individual border properties */
table {
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;
}
Basic Table Border
The following example demonstrates how to add a simple border to a table ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px dashed black;
}
td, th {
border: 2px solid midnightblue;
text-align: center;
padding: 8px;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>
A table with a dashed black outer border and solid blue borders around each cell, displaying player rankings with centered text.
Setting Border Style
You can customize individual border sides using specific style properties ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
border: 2px solid black;
border-left-style: dashed;
border-right-style: dotted;
}
td, th {
border: 1px solid gray;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Phone</td>
<td>$599</td>
</tr>
</table>
</body>
</html>
A table with different border styles: dashed left border, dotted right border, and solid top/bottom borders.
Setting Border Width
Control the thickness of borders using width properties ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
border: 2px solid black;
border-top-width: 5px;
border-bottom-width: 5px;
}
td, th {
border: 1px solid midnightblue;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>Sarah</td>
<td>92</td>
</tr>
</table>
</body>
</html>
A table with thicker top and bottom borders (5px) and normal side borders (2px).
Setting Border Color
Apply different colors to individual borders for enhanced visual appeal ?
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
border: 5px solid black;
border-left-color: red;
border-right-color: green;
border-top-color: yellow;
border-bottom-color: orange;
}
td, th {
border: 2px solid midnightblue;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>10</td>
</tr>
<tr>
<td>Oranges</td>
<td>15</td>
</tr>
</table>
</body>
</html>
A colorful table with red left border, green right border, yellow top border, and orange bottom border.
Individual Border Properties
Use specific border properties to target individual sides of the table ?
<!DOCTYPE html>
<html>
<head>
<style>
.left-border {
border-left: 8px dashed red;
border: 2px solid black;
}
.right-border {
border-right: 6px dotted blue;
border: 2px solid black;
}
table {
margin: 20px;
border-collapse: collapse;
}
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table class="left-border">
<tr>
<td>Left Border</td>
<td>Example</td>
</tr>
</table>
<table class="right-border">
<tr>
<td>Right Border</td>
<td>Example</td>
</tr>
</table>
</body>
</html>
Two tables displayed: one with a thick dashed red left border, another with a dotted blue right border.
Conclusion
CSS border properties provide flexible control over table appearance. You can apply uniform borders or customize each side individually using specific properties like border-left, border-right, border-top, and border-bottom along with their style, width, and color variations.
2K+ Views
