×

HOW TO SHOP → CHOOSE A SERVICE → REVIEW & PURCHASE YOUR ORDER →WE DELIVER

If you still have problems, please let us know, by sending an email to sales@webgranddesigns.com . Thank you!

SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES

FORGOT YOUR PASSWORD?

FORGOT YOUR DETAILS?

AAH, WAIT, I REMEMBER NOW!

Web Grand Designs

Web Grand Designs

Web Grand Designs Ultra Premium Web Services.

Web Grand Designs
unit 57, 6 New Union St, Coventry CV1 2HN

Open in Google Maps
QUESTIONS? EMAIL: SALES@WEBGRANDDESIGNS.COM
  • SUPPORT
  • LOGIN
  • MY CART
    No products in cart.
  • About Us
  • Our Process
  • Our Services
    • Graphics & Design
      • Logo Design
      • Business Cards & Stationery
      • Portraits
      • Cartoons & Comics
      • Flyers & Brochures
      • Book & Album Covers
      • Packaging Design
      • Web & Mobile Design
      • Social Media Design
      • Banner Ads
      • Photoshop Editing
      • Architecture & Floor Plans
      • T-Shirts & Merchandise
    • Digital Marketing
      • Social Media Marketing
      • SEO
      • Content Marketing
      • Video Marketing
      • Email Marketing
      • Search & Display Marketing
      • Marketing Strategy
      • Web Traffic
      • Web Analytics
    • Business
      • Virtual Assistant
      • Website Content
      • Business Names & Slogans
      • Business Plans
      • Technical Writing
      • Creative Writing
      • Legal Writing
      • Market Research
      • Resumes & Cover Letters
      • Branding Services
      • Legal Consulting
      • Presentations
      • Financial Consulting
    • Video & Animation
      • Editing & Post Production
      • Whiteboard & Animated Explainers
      • Intros & Outros
      • Slideshows & Promo Videos
      • Logo Animation
      • Spokesperson Videos
      • Animated Characters & Modeling
      • Short Video Ads
      • Lyric & Music Videos
    • Music & Audio
      • Voice Over
      • Mixing & Mastering
      • Sound Effects
      • Producers & Composers
      • Session Musicians & Singers
      • Singer-Songwriters
    • Programming & Tech
      • WordPress
      • Website Builders & CMS
      • Product Descriptions
      • Web Programming
      • Ecommerce
      • Mobile Apps & Web
      • Databases
  • Portfolio
  • Blog
  • Contact Us
FREEQUOTE
  • Home
  • Style – Tables
May 12, 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>
0

Leave a Reply Cancel reply

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

Web Grand Design

Featured Posts

  • Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED

    8 comments

Recent Comments

  • sales@webgranddesigns.com on Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED
  • Caz on Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED
  • Maxine on Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED
  • tanya on Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED
  • Typicalcat69 on Bush TV Software Problem (Vestel) led40127fhdcntd – Turns off and on repeatedly FIXED

Archives

  • August 2015

Categories

  • Tips & Tricks

Meta

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

GET A CUSTOM BESPOKE SERVICE QUOTE

Please fill this for and we'll get back to you as soon as possible!

  • My Account
  • Orders
  • Downloads
  • Terms and Conditions
Something is wrong.
Instagram token error.
Follow
Load More

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

Email: sales@webgranddesigns.com

Web Grand Designs

Recent reviews

  • Logo Design
    Rated 5 out of 5
    by Wetradelive
  • Tweet
  • Pin It
  • GET SOCIAL
Web Grand Designs

© 2018 All rights reserved. Web Grand Designs.

TOP

SPIN TO WIN!

  • Try your lucky to get discount coupon
  • 1 spin per email
  • No cheating
Try Your Lucky