Add Border To Table With Bootstrap, CSS or jQuery

In this tutorial, learn how to add border to table using Bootstrap. You can also create a table with the bordered cell using CSS or jQuery.

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 show bordered cells. That’s why you need a method which is given below to add borders.

So, let’s start learning each method of adding borders.

Method 1: Use Bootstrap Table Classes For Adding Border

One of my favorite and simple methods is by using Bootstrap. If you use 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 only the addition of the above classes, you will get a table with each cells are bordered. You may also like to read different Bootstrap table classes in detail.

Output

Sr. No.Device NameQuantity
1Washing Machine2
2Keyboard6
3Ceiling Fan12
4Laptop3

The above table contains the added borders using the Bootstrap. It’s the clean method where you have just put the useful Bootstrap classes.

Method 2: Use CSS For Addition of Border

If you use the CSS to add borders to the table cell, you have to add a few CSS codes. You also have to add a class selector to 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.

Output

Sr. No.Computer Parts NameSize
1RAM2 GB
2Hard Disk1 Tera Byte
3Mouse2
4Pen Drive40 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.

Method 3: 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 below-given method. 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.

Output

Sr. No.Computer Parts NameSize
1RAM2 GB
2Hard Disk1 Tera Byte
3Mouse2
4Pen Drive40 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.

Hope, you like this post of how to add the border to the table using Bootstrap, CSS, and jQuery. If you have any query regarding the tutorial, please comment below.

Reference
Stackoverflow Discussion for Bootstrap Classes for adding table border

Also tell me, which method you are using to create a table with bordered cells.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.