Basic Table

  1. Tables
  2. Basic Table

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head

Use one of two modifier classes to make <thead>s appear light or dark gray.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Borderless table

Add .table-borderless for a table without borders.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

Use contextual classes to color table rows or individual cells.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Basic Tables

NAME RATE SKILL TYPE LOCATION ACTION
Jhon Right $18/hr UI/UX Remote Dhaka,Taxes
Ajoy Vanblum $15/hr Graphic concepts Remote India,Taxes
Smith Blogz $14/hr Animation Remote Austin,Texas
Ashley Jhon $18/hr Animation Remote USA,Taxes
Lara Mice $17/hr Animation Remote Austin,Texas
Basic Table

Add class .table

# First Name LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry Jellybean @lajelly
5 Larry Kikat @lakitkat
Hoverable Table

Add class .table-hover

# First Name LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry Jellybean @lajelly
5 Larry Kikat @lakitkat

Table Layout - 1

Add class - primary-color

# First Name Last Name Username
1 Nigam Eichmann @Sonu
2 Deshmukh Prohaska @Genelia
3 Roshan Rogahn @Hritik

Table Layout - 2

Add class - success-color

# First Name Last Name Username
1 Nigam Eichmann @Sonu
2 Deshmukh Prohaska @Genelia
3 Roshan Rogahn @Hritik

Table Layout - 3

Add class - bg-purple

# First Name Last Name Username Phone
1 Nigam Eichmann @Sonu 013456
2 Deshmukh Prohaska @Sonu 012356
3 Roshan Rogahn @Hritik 013456
4 Roshan Rogahn @Hritik 013456
5 Roshan Rogahn @Hritik 013456
6 Roshan Rogahn @Hritik 013456

Basic Table

Add class .table

# First Name Last Name Username Role
1 Deshmukh Prohaska @Genelia admin
2 Deshmukh Gaylord @Ritesh member
3 Sanghani Gusikowski @Govinda developer
4 Roshan Rogahn @Hritik supporter
5 Joshi Hickle @Maruti member
6 Nigam Eichmann @Sonu supporter

Striped Table

Add class .table-striped

User First name Progress Amount Deadline
image Herman Beck
$ 77.99 May 15, 2023
image Messsy Adam
$245.30 July 1, 2023
image John Richards
$138.00 Apr 12, 2023
image Peter Meggik
$ 77.99 May 15, 2023
image Edward
$ 160.25 May 03, 2023
image John Doe
$ 123.21 April 05, 2023
image Henry Tom
$ 150.00 June 16, 2023