Cart

Products by Category

FORGOT YOUR DETAILS?

Table Styles

Welcome to Kalypso Template, a wonderful and premium product for multipurpose websites

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>
TOP
PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vbWFwcy9lbWJlZD9wYj0hMW0xOCExbTEyITFtMyExZDYwNDQuMjc1NjM3NDU2ODA1ITJkLTczLjk4MzQ2MzY4MzI1MjA0ITNkNDAuNzU4OTkzNDExNDc4NTMhMm0zITFmMCEyZjAhM2YwITNtMiExaTEwMjQhMmk3NjghNGYxMy4xITNtMyExbTIhMXMweDAlM0EweDU1MTk0ZWM1YTFhZTA3MmUhMnNUaW1lcytTcXVhcmUhNWUwITNtMiExc2VuITJzITR2MTM5MjkwMTMxODQ2MSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZnJhbWVib3JkZXI9IjAiIHN0eWxlPSJib3JkZXI6MCI+PC9pZnJhbWU+
COMPANY NAME
221, Mount Olimpus, Rheasilvia, Mars,
Solar System, Milky Way Galaxy
+1 (999) 123-45-67
Thank You. We will contact you as soon as possible.
SUBSCRIBE TO OUR NEWSLETTER
We promise to bring you real useful and valuable content!
Get the the latest and greatest tips, ideas, resources, and action plans to start and grow your own successful Home Business.
ENTER YOUR NAME
ENTER YOUR E-MAIL
We hate spam too and will never share your information.
You Gotta Have This Empower Calendar
* 365 Days of Empowering Inspiration
* Daily Quotes, Affirmations, Intentions
* Begin Every Day on a Positive Note
* Add Your Own Words of Wisdom
* Print it Out and View it Often
* Use it to STAY Motivated
* Give the Ultimate Powerful Gift
* IT'S ONLY 10 BUCKS
IT'LL BE THE BEST $10 YOU'LL EVER INVEST
Please help us reach our CRAZY AUSPICIOUS goal to empower 1 million higher achievers. Calendar proceeds go towards creating new business ventures for young entrepreneurs . . . Thank You So Much!
Discover How to Achieve Rediculous Success!
Maximize your true passions, gifts, and talents to create and sustain a WILDLY SUCCESSFUL Home Business with those qualities you already possess!
  • Begin with Super Positive Affirmations
  • Interests & Passions Assessment Ebook
  • Inspirational Wallpapers
  • Mindset Matters Workbook
  • Tons of Home Business Ideas
  • Your NEW Beginning – Get Started Today
  • A Must-Have Kit for Maximum Success
  We hate spam and never share your details.