Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to add a border to the table using Bootstrap, CSS, or jQuery. The short answer is: add the Bootstrap .table-bordered class to <table> element.
You can also use the CSS border property to add borders to the table cells. A table contains <th> cell and <td> cell. However, if you do not apply any method to add borders to your table cells. The table has no default property to automatically add bordered cells.
That’s why you need a method that is given below to add borders. So, let’s start learning each method of adding borders.
Use Bootstrap Table Classes For Adding Border
One of my favorite and simple methods is by using Bootstrap. If you use the Bootstrap method to add borders, you have to just add the classes .table and .table-bordered to the <table> tag.
You don’t need to do anything after that. After the addition of the above classes, you will get a table with each cell are bordered. You may also like to read different Bootstrap table classes in detail.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<table class="table table-bordered"> <tr> <th>Sr. No.</th> <th>Device Name</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Washing Machine</td> <td>2</td> </tr> <tr> <td>2</td> <td>Keyboard</td> <td>6</td> </tr> <tr> <td>3</td> <td>Ceiling Fan</td> <td>12</td> </tr> <tr> <td>4</td> <td>Laptop</td> <td>3</td> </tr> </table> |
Output
| Sr. No. | Device Name | Quantity |
|---|---|---|
| 1 | Washing Machine | 2 |
| 2 | Keyboard | 6 |
| 3 | Ceiling Fan | 12 |
| 4 | Laptop | 3 |
The above table contains the added borders using Bootstrap. It’s the clean method where you have just put the useful Bootstrap classes.
How to Add Borders to Table Using CSS
If you use the CSS to add borders to the table cell, you have to use CSS border property and add a few more CSS. You also have to add a class selector to select the element and apply the CSS. Add CSS individually for the table header rows as well as to the internal rows.
See the example below to apply CSS and add the borders to table cells.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style> .mytable { border-collapse: collapse; border: 1px solid #ccc; } .mytable td{ border: 1px solid #ccc; padding:10px; } .mytable th{ border: 1px solid #ccc; padding:10px; } </style> <table class="mytable"> <tr> <th>Sr. No.</th> <th>Computer Parts Name</th> <th>Size</th> </tr> <tr> <td>1</td> <td>RAM</td> <td>2 GB</td> </tr> <tr> <td>2</td> <td>Hard Disk </td> <td>1 TeraByte</td> </tr> <tr> <td>3</td> <td>Mouse</td> <td>2</td> </tr> <tr> <td>4</td> <td>Pen Drive</td> <td>40 GB</td> </tr> </table> |
Output
| Sr. No. | Computer Parts Name | Size |
|---|---|---|
| 1 | RAM | 2 GB |
| 2 | Hard Disk | 1 TeraByte |
| 3 | Mouse | 2 |
| 4 | Pen Drive | 40 GB |
The above example contains the CSS style and the table. The added CSS applied the borders to each cell of the table. You have to use the same CSS as given above. However, you can change the border color and padding as per your requirements.
Create Border In Table Cells Using jQuery
In addition to the above all, you can also apply the borders to the table cell using jQuery. To perform this task and apply borders, you have to use the css() method to apply a style to the element using jQuery. Before applying the jQuery given below, you also have to add the class to the <table> tag.
See the method given below and apply borders using jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script> $(document).ready(function(){ $(".bortable-jq").css({"border-collapse":"collapse","border":"1px solid #ccc"}); $(".bortable-jq td").css({"padding":"6px","border":"1px solid #ccc"}); $(".bortable-jq th").css({"padding":"6px","border":"1px solid #ccc"}); }); </script> <table class="bortable-jq"> <tr> <th>Sr. No.</th> <th>Computer Parts Name</th> <th>Size</th> </tr> <tr> <td>1</td> <td>RAM</td> <td>2 GB</td> </tr> <tr> <td>2</td> <td>Hard Disk </td> <td>1 TeraByte</td> </tr> <tr> <td>3</td> <td>Mouse</td> <td>2</td> </tr> <tr> <td>4</td> <td>Pen Drive</td> <td>40 GB</td> </tr> </table> |
Output
| Sr. No. | Computer Parts Name | Size |
|---|---|---|
| 1 | RAM | 2 GB |
| 2 | Hard Disk | 1 TeraByte |
| 3 | Mouse | 2 |
| 4 | Pen Drive | 40 GB |
You will get the same bordered table as you get using Bootstrap and CSS. The above example contains the bordered table applied through jQuery. You may also like to read How JQuery Add Style To HTML Element And Apply CSS.
DOWNLOAD Free Bootstrap CHEAT SHEET
I hope you like this post on how to add the border to the table using Bootstrap, CSS, and jQuery.
Reference
Stackoverflow Discussion for Bootstrap Classes for adding table-border