Basic Tables

Refers to data arranged in rows and columns. A spreadsheet, for example, is a table. In relational database management systems, all information is stored in the form of tables. Webopedia - Online Tech Dictionary for IT Professionals
  1. Tables
  2. Basic Tables
Basic Table

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#BrowserCreatorSoftware licenseCurrent layout engine
1Google ChromeGoogleTerms of ServiceBlink
Edit Share Remove
2Internet ExplorerMicrosoft, SpyglassProprietaryTrident
Edit Share Remove
3Mozilla FirefoxMozilla FoundationMPRGecko
Edit Share Remove
4SafariApple Inc.ProprietaryWebKit
Edit Share Remove
5OperaOpera SoftwareProprietaryPresto
Edit Share Remove
Striped rows

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

PhotoFull NameRoleEmailPhone
imagePeter ClarkUI Designerpeter@example.com(641)-734-4763
Edit Share Remove
imageNicole BellContent Designernicole@example.com(741)-034-4573
Edit Share Remove
imageSteven ThompsonVisual Designersteven@example.com(471)-543-4073
Edit Share Remove
imageElla PattersonWeb Editorella@example.com(799)-994-9999
Edit Share Remove
imageKenneth RossSenior Designerkenneth@example.com(111)-114-1173
Edit Share Remove
Condensed table

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

Clicks UpdateStatus
alpha.com3,330Feb 13Expiring
beta.com3,330Jen 15Active
gamma.com3,330Mar 09Expired
delta.com3,330Feb 10Flagged
epsilon.com3,330Feb 18Active
zeta.com3,330Feb 13Expiring
eta.com3,330Jen 15Active
theta.com3,330Mar 09Expired
iota.com3,330Feb 10Flagged
kappa.com3,330Feb 18Active
Bordered table

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

DomainClicks UpdateStatus
alpha.com3,330Feb 13Expiring
beta.com3,330Jen 15Active
gamma.com3,330Mar 09Expired
delta.com3,330Feb 10Flagged
epsilon.com3,330Feb 18Active
zeta.com3,330Feb 13Expiring
eta.com3,330Jen 15Active
theta.com3,330Mar 09Expired
iota.com3,330Feb 10Flagged
kappa.com3,330Feb 18Active
Contextual classes

Use contextual classes to color table rows or individual cells.

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content