The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Table is an ubiquitous feature of most user interfaces, regardless of a site's content or function. It's design and use is therefore an important factor in the overall user experience.

Bootstrap Table

Bootstrap provides table with its own custom table styles. This simple table can be also converted to table with striped rows, bordered table, table with hover rows, condensed table, table with contextual classes and responsive table.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Propeller Table

The Propeller Table is an enhanced version of the Bootstrap standard HTML <table>. Include .pmd-table followed by .table to use Propeller table.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Card Table

Card Table reformats each row into a card for narrow screens. This way user can view complete information without horizontal scroll. Add .pmd-table-card to convert simple table into Card Table.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Nested Table

Nested Table is a table inside a table. It can have several rows for each row of its parent table. Add .child-table to the tr where you want to nest your table. Then add colspan to the td followed by above tr with the value equal to the number of columns in sub-table. Add .table-sm followed by .table in nested table tag to make it look like sub-table.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Giacomo Guilizzoni Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Striped Rows Table

Create Striped Rows Table by adding .table-striped in your code.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Bordered Table

Create Bordered Table by adding .table-bordered in your code.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Hoverable Rows Table

Create Hoverable Rows Table by adding .table-hover in your code.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Small Table

Create Small Table by adding .table-sm in your code.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Contextual Table

To create Contextual Table add the class on row namely .table-active for active, .table-success for success, .table-info for info, .table-warning for warning, and .table-danger for danger.

# 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
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

Inverse Table

Create Inverse Table by adding .table-inverse in your code.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet more_vert

Reflow Table

Create Reflow Table by adding .table-reflow in your code.

Name Code State/City Incharge Name Mobile Type of Work End Date of Work Status Timesheet  
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert
Giacomo Guilizzoni JONEA140 Melbourne Giacomo Guilizzoni 9625145236 9625145236 1 June 2014 Active Timesheet more_vert

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Table. The table lists the available classes and their effects.

Propeller Classes Effect Remark
.pmd-table Wrapper class for card layout. Required
.pmd-z-depth Used to provide shadow depth to card. Shadow depth inceases with the counting (pmd-z-depth, pmd-z-depth-1...pmd-z-depth-5) Optional
.pmd-card-title Defines header section of the card Optional
.pmd-card-body Defines content section of the card. Optional
.pmd-card-actions Defines section for the action buttons/links for the card. Optional
.table-responsive Add this class to create a responsive table Optional
.child-table Add this class to create a child table Required
.table-sm Add this class to format a child table Optional