How to Add Border to <tr> Element in CSS ?
Last Updated :
24 Apr, 2023
In this article, we will see the different techniques to include the border to the <tr> Table element using CSS. There are 2 ways to apply the bottom border in the table in HTML.
- By implementing HTML only
- By using HTML & CSS
We will explore both approaches for including the border to the <tr> element, & will understand them through the examples.
Using HTML: In this case, we will use the rules attribute of the table. Rules are the attribute in an HTML table that allows the user to display only inside the borders of the table which can be chosen among only rows, cols, or all.
Example 1: In this example, we used the rules attribute of the table element and set its value to “rows”. This property creates borders along all rows in the table. Then, you added an empty <tr> element after each row to suppress the top borders and achieve the desired effect of having only bottom borders.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
</head>
<body align="center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
How to add border-bottom to the table row?
</h3>
<table rules="rows"
align="center"
width=60%>
<tr>
<th>Roll Number</th>
<th>Name Of Geek</th>
<th>Marks</th>
</tr>
<tr>
<td>01</td>
<td>Geek 01</td>
<td>100</td>
</tr>
<tr>
<td>02</td>
<td>Geek 02</td>
<td>95</td>
</tr>
<tr>
<td>03</td>
<td>Geek 03</td>
<td>90</td>
</tr>
<tr></tr>
</table>
</body>
</html>
|
Output:
Output Table
Using HTML & CSS: The border-style in CSS is another way of adding a bottom border to the table. This property helps the user to manipulate any borders of the table.
Using the border-collapse: This property is used to add the border-collapse: collapse to the table rule. This property sets whether cells inside a <table> have shared or separate borders. When cells are collapsed, the border-style value of the inset behaves like a groove, and the outset behaves like a ridge and when cells are separated, the distance between cells is defined by the border-spacing property.
Syntax:
/* Global values */
border-collapse: inherit;
border-collapse: revert-layer;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;
/* Keyword values */
border-collapse: collapse;
border-collapse: separate;
Values:
- separate: Adjacent cells have distinct borders (the separated-border table rendering model).
- collapse: Adjacent cells have shared borders (the collapsed-border table rendering model).
Example 2: In the below example, we set the border-collapse property of the table element to collapse. This ensures that adjacent borders collapse into a single border, which is necessary for adding a bottom border to each cell. Then, we set the border-bottom property of all td and th elements to 1px solid black, which adds a solid black line to the bottom of each cell. You can adjust the border color, width, and style to suit your needs.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table with Bottom Border</title>
<style>
/* Using css collapse property,
we set the bottom borders */
table {
border-collapse: collapse;
width: 50%
}
td, th {
border-bottom:
1px solid black;
/* Setting border type, solid
and color to be black */
text-align: left;
}
</style>
</head>
<body align="center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>How to add border-bottom to table row</h3>
<table align="center">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>Johnson</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Output table
Using border-spacing: This property is used to set the distance between the borders of neighboring cells in the Table.
Syntax:
/* Global values */
border-spacing: initial;
border-spacing: inherit;
border-spacing: revert;
border-spacing: unset;
border-spacing: revert-layer;
/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
Example 3: In the below example, we set the border-spacing property of the table element to 0, which sets the space between adjacent cell borders to zero. Then, we set the border-bottom property of all td and th elements to 1px solid black, which adds a solid line with a color of black to the bottom of each cell. You can adjust the border color, width, and style to suit your needs.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table with Bottom Border</title>
<style>
/* Using border-spacing property
to add bottom border */
table {
border-spacing: 0;
width: 50%;
}
td, th {
border-bottom: 1px solid black;
text-align: left;
}
</style>
</head>
<body align="center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>How to add border-bottom to table row</h3>
<table align="center">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>Johnson</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Output table
Share your thoughts in the comments
Please Login to comment...