FOLLOW ME: ON SOCIAL

UK Career Coach - Jelena Radonjic

  • HOME
  • ABOUT
  • SERVICES
    • Coaching for Individual Clients
      • Ultimate Career Transformation for Mindful Fulfilment Seekers
      • Career Transitions 1-to-1 Coaching
      • Career Transitions Made Easy Group Coaching
    • Career Coaching For Organisations and Corporate Clients
  • BLOG
  • MEDIA
  • TESTIMONIALS
  • CONTACT
CAREERQUIZ
  • Home
  • Style – Tables
16th February 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

  • Career fulfilment – elusive or not? Career Fulfilment Cycle and 4 key steps on the journey to Fulfilment

    It is important to talk about career transition...
  • Not ready for change? Changing your mindset might help

    What Is Change? Fear of change is common a...
  • How should I present time off work due to injury or illness on my CV?

    The Health and Safety Executive (HSE) estimates...
  • KEY STEPS ON YOUR CAREER JOURNEY

    We have all experienced confusion, doubt and un...
  • Are Millennial and Gen Z women really that different?

    Understanding the position of women in the work...

Recent Comments

    Archives

    • December 2020
    • November 2020
    • October 2020
    • August 2020
    • June 2020
    • March 2020
    • February 2020
    • October 2019
    • June 2019
    • April 2019
    • January 2019
    • December 2018
    • July 2018
    • April 2018
    • March 2018
    • September 2017
    • June 2017

    Categories

    • Career
    • Career alignment
    • Career Development
    • Career Transition
    • Employment
    • Entrepreneurship
    • Fulfillment
    • Interview
    • Mindset
    • Personal Branding
    • Uncategorised
    • Values

    Meta

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

    Featured Posts

    • Career fulfilment – elusive or not? Career Fulfilment Cycle and 4 key steps on the journey to Fulfilment

      0 comments
    • Not ready for change? Changing your mindset might help

      0 comments
    • How should I present time off work due to injury or illness on my CV?

      0 comments
    • KEY STEPS ON YOUR CAREER JOURNEY

      0 comments
    • Are Millennial and Gen Z women really that different?

      0 comments
    • ABOUT ME
    • FREE CONSULTATION
    • SERVICES
    • MEDIA
    • BLOG
    • CONTACT

    MARKETING PERMISSIONS

    What Work will use the information you provide on this form to be in touch with you and to provide updates and marketing. Please let us know all the ways you would like to hear from us:
    We use Active Campaigns as our marketing platform. By clicking the send button to subscribe, you acknowledge that your information will be transferred to Active Campaigns for processing.Learn more about Active Campaigns’ privacy practices:
    https://www.activecampaign.com/legal/privacy-policy
          

    DOWNLOAD MY 10 QUESTIONS FOR ULTIMATE CAREER CLARITY

    Download the free PDF

    Marketing by

    You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at info@whatwork.co.uk. We will treat your information with respect. For more information about our privacy practices please visit our website. By clicking below, you agree that we may process your information in accordance with these terms.


          

    • GET SOCIAL
    UK Career Coach - Jelena Radonjic

    © 2020 All rights reserved. WhatWork

    TOP