How to apply border inside a table ?
Last Updated :
24 May, 2024
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.
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.
HTML
<!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.
HTML
<!-- 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.
HTML
<!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:
Similar Reads
How to Create Table in HTML?
HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def
3 min read
How to group the body content in a table using HTML5 ?
In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table. Syntax: <tbody> ... </tbody> Example 1: In this example, we use some HTML tags and make the group the body content in a table. html <!DOCTYPE html
3 min read
How create table without using <table> tag ?
HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding s
3 min read
What is the rule attribute in HTML Table ?
This is an HTML attribute, that is used to specify which parts of the inside borders should be visible. The HTML rule attribute is applicable on table tags. The <table> rules attribute is not supported by HTML 5. Syntax: <table rules="value"> Attributes: This attribute accepts 5 values a
1 min read
Why should we avoid use of tables for layout in HTML ?
In this article, we will learn why we should avoid using tables for layout in HTML. A website can be divided into various sections comprising of header, menus, content, and footer based on which there are many different layout designs available for developers. Different layouts can be created by usi
4 min read
How to fix the height of rows in the table?
Fixing the height of rows in a table ensures that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.Here
3 min read
How to set the number of rows a table cell should span in HTML ?
In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. Syntax:
2 min read
How to set fixed width for <td> in a table ?
The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted
5 min read
How to merge table cells in HTML ?
The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es
2 min read
How to Create Time-Table Schedule using HTML?
A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t
3 min read