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

No WrapModifier

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
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>

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>

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-main !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