Basic - Tables

Table Styles

Basic Table

Project NameDescriptionPriceProgress
Early BirdRedesign project template$4,500
Angry Birds
ALERT!
Something goes here$9,000
PHP Login pageA project in business and science is typically defined$5,400
Zombiesfrequently involving research or design$6,000

Table Styles

Stripped Table

They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. Simply add the class.table-striped


First NameLast NameStatus
MarkOttoALERT!
Jacob
ALERT!
ThorntonWORK
Larrythe BirdALERT!

Hover Table

Hover tables is addition option that allows you to see what row you selected, this helps to see all the columns in that row. Use the following class to toggle this option .table-hover


#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Table Styles

Bordered Table

Old is gold, here is old fashion bordered table, we tweaked it a bit so that the headings looks more prominent. As shown in all of the examples these tables are made to handle extra elements like small buttons, labels and even charts in it. By using the class .table-bordered. You can mix all the above mention classes to bring a unique table design


MonthSalesGraph
January$ 50,000.00
February$ 10,000.00
March$ 85,000.00
April$ 56,000.00
May$ 98,000.00
favourites
Jane Smith
Hello you there?
3
David Nester
Busy, Do not disturb
more friends
Jane Smith
Hello you there?
David Nester
Busy, Do not disturb
Jane Smith
Hello you there?
David Nester
Busy, Do not disturb