Fascinate Now

  • HOME
  • ABOUT
  • PROCESS
  • SOLUTIONS
  • PARTNERS
  • RESSOURCES
FREECONSULTATION
  • Home
  • Style – Tables
June 18, 2025

Style – Tables

Style – Tables

Default styles

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
<table>
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  …
</table>

.table-hover

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
<table>
  …
</table>

.table-condensed

Makes 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
<table>
  …
</table>

Optional row classes

Use contextual classes to color table rows.

Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
# Product Payment Taken Status
1 TB – Monthly 01/04/2012 Approved
2 TB – Monthly 02/04/2012 Declined
3 TB – Monthly 03/04/2012 Pending
4 TB – Monthly 04/04/2012 Call in to confirm
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> 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 (or row, depending on scope and placement) labelsMust be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe

Recent Posts

  • Beauty is everywhere you look !

    ...
  • Compass

    Clear Vision – The key to your business success

    The clarity to succeed...
  • Going wireless

    Take some time to disconnect from your computer...

Recent Comments

    Archives

    • February 2020
    • August 2015

    Categories

    • Coaching
    • Image
    • Mobile
    • Technology
    • Vision

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org

    Featured Posts

    • Beauty is everywhere you look !

      0 comments
    • Compass

      Clear Vision – The key to your business success

      0 comments
    • Going wireless

      0 comments

    SEARCH

    RECENT POSTS

    • Beauty is everywhere you look !

    • Compass

      Clear Vision – The key to your business success

    • Going wireless

    TAG CLOUD

    art Clarity Coaching Direction experiences Image Inspiration Nature Vision

    PERSONAL BRANDING OPTIONS

    • HOME
    • ABOUT
    • PROCESS
    • SOLUTIONS
    • PARTNERS
    • RESSOURCES

    NEWSLETTER SIGNUP

    By subscribing to our mailing list you will always be update with the latest news from us.

    We never spam!

    GET IN TOUCH

    T (619)384 6058
    Email: prolight72@gmail.com

    Your Brand Consultant
    San Diego, US

    Open in Google Maps

    Invalid or expired token.
    social sharing
    social sharing
    • HOME
    • ABOUT
    • PROCESS
    • SOLUTIONS
    • PARTNERS
    • RESSOURCES
    • GET SOCIAL

    © 2015 All rights reserved.http://yourbrandconsultant.com.

    TOP
    Get the best kept secret to build Star Image Power!

    Get the best kept secret to build Star Image Power!

    We're just like you ! We love good news and no spam :)

    Download the Top Success                            Secrets to Monetize your IMAGE

    Field is empty
    Field is empty
    We respect your privacy and do not send out spam.

    You have Successfully Subscribed!

    Pin It on Pinterest

    Share This
    • Facebook
    • Twitter
    • Evernote
    • Gmail
    • LinkedIn
    • Blogger
    • StumbleUpon
    • Tumblr