How to apply border inside a table ?
Applying a border inside a table involves setting border properties to table elements. Use CSS to specify border width, style, and color. Apply borders to table rows, cells, or specific elements using CSS selectors like table, tr, td, or their respective classes or IDs.
There are some common ways to apply a border inside the table in HTML.
Table of Content
- Using HTML Attributes
- Using HTML and CSS
- Using child concept in CSS
Using HTML Attributes :
In this case, we will use the rules attribute of the table. Rules are the attribute in the 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: In this example, we create a table with different border rules: “rows” for row borders, “cols” for column borders, and “all” for both row and column borders. Each table displays roll numbers, geek names, and marks.
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
</head>
<body>
<h2>Table having rules="rows":</h2>
<table rules="rows">
<!--table containing only
border of rows-->
<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>
</table>
<br>
<hr>
<hr>
<br>
<h2>Table having rules="cols":</h2>
<!--table containing only
border of columns-->
<table rules="cols">
<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>
</table>
<br>
<hr>
<hr>
<br>
<h2>Table having rules="all":</h2>
<!--table containing borders of
both row and column-->
<table rules="all">
<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>
</table>
</body>
</html>
Output:
Using HTML and CSS:
Using HTML and CSS to apply borders inside a table involves defining the table structure in HTML and using CSS styles to customize the border appearance. This approach provides flexibility and separation of content (HTML) from presentation (CSS), enhancing maintainability and reusability.
Example 1: The border-style in CSS is another way of displaying borders inside table. This property helps user to manipulate the outside borders of the table.
<!-- Using border-style in CSS -->
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
<style media="screen">
table {
margin: 0 auto;
border-collapse: collapse;
border-style: hidden;
/*Remove all the outside
borders of the existing table*/
}
table td {
padding: 0.5rem;
border: 5px solid orange;
}
table th {
padding: 0.5rem;
border: 5px solid ForestGreen;
}
</style>
</head>
<body>
<table>
<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>
</table>
</body>
</html>
Output:
Using child concept in CSS
In CSS, leveraging the first-child and last-child selectors allows for selectively removing unwanted table borders. By targeting the first and last columns and rows, respective border edges can be eliminated, leaving behind only the desired inside borders for a cleaner table appearance.
Example: In this example we creates a table with inside borders only. Using CSS selectors like first-child and last-child, it removes unwanted borders from the first column, first row, last column, and last row.
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
<style media="screen">
table {
margin: 0 auto;
border-collapse: collapse;
}
table td {
padding: 0.5rem;
border: 5px solid DodgerBlue;
}
table th {
padding: 0.5rem;
border: 5px solid Tomato;
}
/* Removing all unwanted border
from left hand side by calling
all the elements in the first
column and removing their left
border*/
table tr td:first-child, th:first-child{
border-left: none;
}
/* Removing all unwanted border
from top of the table by calling
all the elements in first row and
removing their top border*/
table tr:first-child th{
border-top: none;
}
/* Removing all unwanted border
from right hand side by calling
all the elements in last row and
removing their right border*/
table tr td:last-child, th:last-child{
border-right: none;
}
/* Removing all unwanted border
from bottom of the table by
calling all the elements in
last column and removing their
bottom border*/
table tr:last-child td{
border-bottom: none;
}
</style>
</head>
<body>
<table>
<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>
</table>
</body>
</html>
Output: