There is a newer version of Luda.

Let's go!

Table

A table represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Striped Table

A striped table makes the data in rows easy to read, tables are striped by default in Luda. To create a striped table, add the .table calss to a block element like <div>, then wrap a <table> element inside.

Company Founded Founders Address
Google September 4, 1998 Larry Page, Sergey Brin Menlo Park, California, United States
Facebook February 2004 Mark Zuckerberg, Eduardo Saverin... Cambridge, Massachusetts, United States
GitHub 2008 Tom Preston-Werner San Francisco, California, United States
Airbnb August 2008 Brian Chesky, Joe Gebbia, Nathan Blecharczyk San Francisco, California
<div class="table">
  <table>
    <thead>
      <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

Table Borders

If you want to add surrounding borders and row deviders to a table, replace the container’s .table class with the .table-border class.

Company Founded Founders Address
Google September 4, 1998 Larry Page, Sergey Brin Menlo Park, California, United States
Facebook February 2004 Mark Zuckerberg, Eduardo Saverin... Cambridge, Massachusetts, United States
GitHub 2008 Tom Preston-Werner San Francisco, California, United States
Airbnb August 2008 Brian Chesky, Joe Gebbia, Nathan Blecharczyk San Francisco, California
<div class="table-border">
  <table>
    <thead>
      <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

Style Modifiers

.table-nowrapModifier

A .table container has the .table-nowrap class prevents contents in cells from breaking in newlines. Let’s see the below example.

# Company Founded Founders Address Action
Google September 4, 1998 Larry Page, Sergey Brin Menlo Park, California, United States
Facebook February 2004 Mark Zuckerberg, Eduardo Saverin, Dustin Moskovitz, Chris Hughes, Andrew McCollum Cambridge, Massachusetts, United States
GitHub 2008 Tom Preston-Werner San Francisco, California, United States
Airbnb August 2008 Brian Chesky, Joe Gebbia, Nathan Blecharczyk San Francisco, California
<div class="table table-nowrap">
  <table>
    <thead>
      <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

.table-striplessModifier

If you don’t want a striped table, add the .table-stripless class to the .table container.

Company Founded Founders Address
Google September 4, 1998 Larry Page, Sergey Brin Menlo Park, California, United States
Facebook February 2004 Mark Zuckerberg, Eduardo Saverin... Cambridge, Massachusetts, United States
GitHub 2008 Tom Preston-Werner San Francisco, California, United States
Airbnb August 2008 Brian Chesky, Joe Gebbia, Nathan Blecharczyk San Francisco, California
<div class="table-border table-stripless">
  <table>
    <thead>
      <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

.table-hoverModifier

The .table-hover class enhances hovering styles of table rows. Hover the rows in the below table to preview the effects.

Company Founded Founders Address
Google September 4, 1998 Larry Page, Sergey Brin Menlo Park, California, United States
Facebook February 2004 Mark Zuckerberg, Eduardo Saverin... Cambridge, Massachusetts, United States
GitHub 2008 Tom Preston-Werner San Francisco, California, United States
Airbnb August 2008 Brian Chesky, Joe Gebbia, Nathan Blecharczyk San Francisco, California
<div class="table table-hover">
  <table>
    <thead>
      <tr><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

Sass Variables

Striped

$table-head-background: $background-color-muted !default
$table-row-even-background: $background-color-muted !default
$table-row-odd-background: $background-color-main !default

Border

$table-border-style: solid !default
$table-border-width: $line-width-main !default
$table-border-color: $line-color-muted !default
$table-border-radius: $border-radius-main !default

Hover

$table-row-hover-background: $background-color-emphasis !default
$table-row-hover-color: null !default

Others

$table-cell-padding-rem: $spacing-small-rem !default
$table-head-color: $color-emphasis !default
$table-body-color: $color-main !default