How to apply border inside a table ? - GeeksforGeeks

11 Sep, 2021
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 chosen among only rows, cols or all. 
Example: 
HTML
<!-- 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>
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. 
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: 
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.
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: 
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
gabaa406
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Types of CSS (Cascading Style Sheet)