E-DON Electronic Education Initiative

  • Home
  • About
    • About Us
  • Our Team
    • Management Team
    • Our Board
  • Testimonials
  • Gallery
  • Contact
SPEAK TO US
  • Home
  • Style – Tables
January 16, 2021

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 *

Recent Posts

  • Hello world!

    Welcome to WordPress. This is your first post. ...
  • Objectively fashion next-generation potentialities

    Distinctively drive pandemic e-commerce through...
  • Objectively fashion next-generation potentialities

    Distinctively drive pandemic e-commerce through...
  • Hello world!

    Welcome to Kallyas MU. This is your first post....
  • Hello world!

    Welcome to Kallyas MU. This is your first post....

Recent Comments

  • A WordPress Commenter on Hello world!

Archives

  • May 2019
  • January 2017
  • December 2016
  • August 2015

Categories

  • Mobile
  • Networking
  • Technology
  • Uncategorized

Meta

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

Featured Posts

  • Hello world!

    1 comments
  • Objectively fashion next-generation potentialities

    0 comments
  • Objectively fashion next-generation potentialities

    0 comments
  • Hello world!

    0 comments
  • Hello world!

    0 comments

We look forward to hearing from you

About Us

We use multi-media technology to enhance linkages between academic and non-academic institutions around the world. e-Don facilitates both web-based and physical classes for international training and certification programs in the Energy (oil and gas) and Agriculture sector as well as other programs.

Our Location

The Electronic Education Initiative (e-DON)
20002 Flax Flower Drive, Richmond TX 77407, USA

Open in Google Maps

GET IN TOUCH

T (+1) 573 645 6310
Email: info@e-don.global

  • GET SOCIAL

© 2019 All rights reserved. The Electronic Education Initiative (e-DON).

TOP