SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES

FORGOT YOUR PASSWORD?

FORGOT YOUR DETAILS?

AAH, WAIT, I REMEMBER NOW!

Please access the Header SideBar options and choose a menu.

If you accidentally enabled Kallyas Addon - Side Header, you can disable it in Plugins page.

  • Home
  • Style – Tables
16 maja 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>

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Recent Posts

  • Witaj, świecie!

    Witaj w WordPressie. To jest twój pierwszy wpis...
  • Progressively repurpose cutting-edge models

    Seamlessly orchestrate process-centric best pra...
  • Enthusiastically administrate ubiquitous

    Competently leverage other’s high standar...
  • Enthusiastically administrate ubiquitous

    Competently leverage other’s high standar...
  • Uniquely productize next-generation opportunities

    Appropriately pontificate synergistic para digm...

Najnowsze komentarze

    Archives

    • luty 2018
    • sierpień 2015
    • grudzień 2013
    • listopad 2013

    Categories

    • Bez kategorii
    • Mobile
    • Networking
    • Posts
    • Technology
    • Uncategorized

    Meta

    • Zaloguj się
    • Kanał wpisów
    • Kanał komentarzy
    • WordPress.org

    Featured Posts

    • Witaj, świecie!

      0 comments
    • Progressively repurpose cutting-edge models

      0 comments
    • Enthusiastically administrate ubiquitous

      0 comments
    • Enthusiastically administrate ubiquitous

      0 comments
    • Uniquely productize next-generation opportunities

      0 comments

    GET A FREE QUOTE

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

    FOOTER MENU

    • Curabitur iaculis
    • Parturient montes
    • Vulputate magna
    • Cum sociis natoque
    • Nulla varius commodo
    • Parturient montes
    • Vulputate magna
    • Cum sociis natoque
    • Nulla varius commodo
    • Terms and Conditions
    Please enter your MailChimp API KEY in the theme options panel prior to using this widget.

    GET IN TOUCH

    T (+48) 387 02 09
    Email: info@polam.pl

    Pracowania Artystyczna Polam
    ul. Piłsudskiego 40
    67-100 Nowa Sól
    Poland

    Open in Google Maps

    Invalid or expired token.
    social sharing
    • DISCLAIMER
    • SUPPORT POLICY
    • LEGAL
    • GET SOCIAL
    Polam - producent form

    © 2015 All rights reserved. Buy Kallyas WordPress Theme.

    TOP
    Zarządzaj zgodami plików cookie
    Aby zapewnić jak najlepsze wrażenia, korzystamy z technologii, takich jak pliki cookie, do przechowywania i/lub uzyskiwania dostępu do informacji o urządzeniu. Zgoda na te technologie pozwoli nam przetwarzać dane, takie jak zachowanie podczas przeglądania lub unikalne identyfikatory na tej stronie. Brak wyrażenia zgody lub wycofanie zgody może niekorzystnie wpłynąć na niektóre cechy i funkcje.
    Funkcjonalne Zawsze aktywne
    Przechowywanie lub dostęp do danych technicznych jest ściśle konieczny do uzasadnionego celu umożliwienia korzystania z konkretnej usługi wyraźnie żądanej przez subskrybenta lub użytkownika, lub wyłącznie w celu przeprowadzenia transmisji komunikatu przez sieć łączności elektronicznej.
    Preferencje
    Przechowywanie lub dostęp techniczny jest niezbędny do uzasadnionego celu przechowywania preferencji, o które nie prosi subskrybent lub użytkownik.
    Statystyka
    Przechowywanie techniczne lub dostęp, który jest używany wyłącznie do celów statystycznych. Przechowywanie techniczne lub dostęp, który jest używany wyłącznie do anonimowych celów statystycznych. Bez wezwania do sądu, dobrowolnego podporządkowania się dostawcy usług internetowych lub dodatkowych zapisów od strony trzeciej, informacje przechowywane lub pobierane wyłącznie w tym celu zwykle nie mogą być wykorzystywane do identyfikacji użytkownika.
    Marketing
    Przechowywanie lub dostęp techniczny jest wymagany do tworzenia profili użytkowników w celu wysyłania reklam lub śledzenia użytkownika na stronie internetowej lub na kilku stronach internetowych w podobnych celach marketingowych.
    Zarządzaj opcjami Zarządzaj serwisami Zarządzaj {vendor_count} dostawcami Przeczytaj więcej o tych celach
    Zobacz preferencje
    {title} {title} {title}