Telefon Destek: 0850 840 95 24
  • Kurumsal
  • Harita ve Konum
  • İletişim
  • KVKK

Digitolia | Kurumsal

  • Adobe
    • After Effects
    • Animate
    • Audition
    • Dreamweaver
    • Fresco
    • illustrator
    • InCopy
    • InDesign
    • Lightroom
    • Photoshop
    • Premiere Pro
    • Premiere Rush
  • AutoDesk
    • Ürünler
      • 3ds Max
      • AutoCad
      • AutoCad LT
      • BIM 360
      • Civil 3D
      • Dynamo Studio
      • Formit
      • Inventor
      • Maya
      • Navisworks
      • Unity
      • Revit
    • Çözümler
      • BIM’e Digitolia İle Geçin
      • AEC Collection
      • M&E Collection
      • PDM Collection
      • Generatif Tasarım
  • Görselleştirme
    • CorelDRAW
    • Corona Renderer
    • finalRender
    • Lumıon 3D
    • Maxwell Render
    • Thea Render
    • V-Ray
  • Medya & Eğlence
    • Boris FX
    • Cinema 4D
    • EDIUS
    • Maxwell Render
    • Red Giant
    • Redshift
    • V-Ray
  • Mimarlık & Mühendislik
    • BlueBeam
    • IDEA StatiCa
    • Kubity
    • Rhinoceros
    • SCIA Engineer
    • SketchUp
  • Pluginler
    • Dibac for SketchUp
    • iToo Software
    • Shaderlight for SketchUp
    • Skatter for SketchUp
    • xNURBS
  • e-Ofis
    • Ingenico Yazar Kasa
    • E-Dönüşüm
    • Mikro FLY
    • Mikro Jump
    • Müşavir
  • Blog
STORE
  • Home
  • 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>

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Son Yorumlar

    Featured Posts

    • SketchUp Pro 2021 İçin Yeni Güncelleme

      0 comments
    • Kalabalık sokaklardan zarif inzivalara

      0 comments
    • SCIA Engineer 21; Yapısal Mühendislik Yazılımlarının Tasarlanmasında Dev Bir Adım!

      0 comments

    Kategoriler

    • Genel

    Program Talep Formu

    İstediğiniz Programı Seçin Uzman Ekibimiz Hemen İletişim Kursun. Ücretsiz Kurulum ve Deneme Süresi

    ÖN BAŞVURU

    Ön başvuru için formu eksiksiz doldurun uzman ekibimiz sizi hemen arayıp bilgilendirsin.

    SİZİ ARAYALIM?
    • Adobe
    • AutoDesk
    • Görselleştirme
    • Medya & Eğlence
    • Mimarlık & Mühendislik
    • Pluginler
    • e-Ofis
    • Blog
    • Kurumsal
    • Harita ve Konum
    • İletişim
    • KVKK

    Adres

    Digitolia Dijital Anadolu Teknoloji San. ve Tic. LTD. ŞTİ

    Fevzipaşa Cad. Ticaret Odası Altı No:4 Merkez / Erzincan

    Telefon: 0850 840 95 24

    TAKİP ET

    • instagram
    • Linkedin
    • Whatsapp Business

    2021 digitolia.com ♥ by

    TOP

    WhatsApp