There are two ways to apply border inside the table in HTML.
- Only using HTML
- Using HTML and CSS
Only Using HTML: In this case, we will use rules attribute of table. Rules is the attribute in HTML table which allows user to display only inside borders of the table which can be choosen among only rows, cols or all.
Example:
<!-- Table contains border from inside only --><!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> |
chevron_right
filter_none
Output:
Using HTML and CSS:
- 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><stylemedia="screen">table {margin: 0 auto;border-collapse: collapse;border-style: hidden;/*Remove all the outsideborders 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>chevron_rightfilter_noneOutput:
- Example 2: Using child concept in CSS is another way of getting a table with the inside border is by removing all the unwanted borders in the table. It can be achieved by using first-child and last-child in CSS. Here, we select the first column and remove its left-hand side border, then select the first row and remove its top border, then we go for the last column and remove its right-hand side border and at last select the last row and remove its bottom border. In this way, we remove all the outside borders of the table and we are left with inside one.
<!DOCTYPE html><html><head><title>Table In HTML</title><stylemedia="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 borderfrom left hand side by callingall the elements in the firstcolumn and removing their leftborder*/table tr td:first-child, th:first-child{border-left: none;}/* Removing all unwanted borderfrom top of the table by callingall the elements in first row andremoving their top border*/table tr:first-child th{border-top: none;}/* Removing all unwanted borderfrom right hand side by callingall the elements in last row andremoving their right border*/table tr td:last-child, th:last-child{border-right: none;}/* Removing all unwanted borderfrom bottom of the table bycalling all the elements inlast column and removing theirbottom 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>chevron_rightfilter_noneOutput:
Recommended Posts:
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to apply colored shadow and border properties to a grayscale image?
- How to apply CSS page-break to print a table with lots of rows?
- HTML | <table> border Attribute
- How to add table row in a table using jQuery?
- How to remove the table row in a table using JavaScript ?
- How to remove table row from table using jQuery ?
- How to make Bootstrap table with sticky table head?
- How create table without using <table> tag ?
- How to apply !important in CSS?
- Apply function to every row in a Pandas DataFrame
- Difference between map, applymap and apply methods in Pandas
- PHP | Ds\Vector apply() Function
- PHP | Ds\Deque apply() Function
- What is the difference between call and apply in JavaScript?
- JavaScript | Function Apply
- PHP | Ds\Sequence apply() Function
- Kotlin | apply vs with
- How to apply multiple transform property to an element using CSS ?
- Copy all the attributes of one element and apply them to another with JavaScript
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
