Bootstrap Table

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are listed below.

Tag Description
<table> Data To Display in tabular format
<thead> It is the Container element for table header rows (<tr>) to label table columns.
<tbody> It is the Container element for table rows (<tr>) in the body of the table.
<tr> It is the Container element for a set of table cells (<td> or <th>) that appears on a single row.
<td> Default table cell.
<th> Special table cell for column
<caption> Description or summary of what the table holds.

Bootstrap Basic Table

Tutor my manjinder singh

The .table class adds basic styling (light padding and only horizontal dividers) to a table:

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Striped rows

The .table-striped class Strip to a table:

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Bordered Table

The .table-bordered class adds borders on all sides of the table and its cells

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Responsive Table

The .table-responsive class makes the table responsive.

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Hover Rows

The .table-hover class adds hover effect on table rows.

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Condensed Table

The .table-condensed class compacts the table.

Firstname Lastname Email
ABC ABC abc@example.com
123 123 123@example.com
xyz xyz xyz@example.com

Example

Try It Yourself