Tables

Tables are the best way to present data, but the default values are not pretty. Furatto takes care of that by pulishing the default styling and taking it to the next level.

Building the markup

The markup to build a table on Furatto is really simple, actually you don't have to do anything else if you already implement them on your site.

A word on tables

We enacourage you to have a well-formed markup. So thead and tbody are necessary tags on building your tables.It' all about semantics

   
<table>
   <thead>
     <tr>
       <th>#</th>
       <th>Name</th>
       <th>Twitter</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>Abraham Kuri</td>
       <td>@kurenn</td>
     </tr>
     <tr>
       <td>2</td>
       <td>Icalia Labs</td>
       <td>@icalialabs</td>
     </tr>
     <tr>
       <td>3</td>
       <td>Furatto</td>
       <td>@furattoicalia</td>
     </tr>
   </tbody>
</table>
   

Table variations

We know the styling we provide is minimal, and you probably want more than that. We got you covered with these 2 tables variations built in Furatto.

   
<table class="striped">
   <thead>
     <tr>
       <th>Name</th>
       <th>Twitter</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Abraham Kuri</td>
       <td>@kurenn</td>
     </tr>
     <tr>
       <td>Icalia Labs</td>
       <td>@icalialabs</td>
     </tr>
     <tr>
       <td>Furatto</td>
       <td>@furattoicalia</td>
     </tr>
   </tbody>
</table>
   

   
<table class="bordered">
   <thead>
     <tr>
       <th>Name</th>
       <th>Twitter</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Abraham Kuri</td>
       <td>@kurenn</td>
     </tr>
     <tr>
       <td>Icalia Labs</td>
       <td>@icalialabs</td>
     </tr>
     <tr>
       <td>Furatto</td>
       <td>@furattoicalia</td>
     </tr>
   </tbody>
</table>
   

Responsive tables

We rebuilt a Foundation plugin on responsive tables, this way by just adding the responsive class to the table, it will be fully navigational on small devices. Don't believe us?, try resizing the window or open it on your mobile.

   
<table class="responsive">
   <thead>
     <tr>
       <th>Name</th>
       <th>Twitter</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Abraham Kuri</td>
       <td>@kurenn</td>
     </tr>
     <tr>
       <td>Icalia Labs</td>
       <td>@icalialabs</td>
     </tr>
     <tr>
       <td>Furatto</td>
       <td>@furattoicalia</td>
     </tr>
   </tbody>
</table>
   

Available sass variables

You can customize the tables very easy by just modifying the variables we provide.

  
//General settings
$table-background-color: #FFF !default;
$table-margin-bottom: px-to-rems(20) !default;
$table-cell-padding: px-to-rems(10) !default;
$table-line-height: px-to-rems(18) !default;
$table-cell-alignment: left !default;
$table-border-color: #d2d2d2 !default;
$table-border-width: 1px !default;
$table-border-style: solid !default;
$table-color: #666 !default;
$table-font-weight: 300 !default;

$table-head-font-weight: 500 !default;
$table-head-letter-spacing: 2px !default;
$headers-with-uppercase: false !default;

//Variations
$table-condensed-padding: 0.28571429rem 0.35714286rem !default;
$table-striped-background-color: #f9f9f9 !default;
$table-bordered-border-width: 1px !default;
$table-bordered-border-style: solid !default;

//Media queries
$media-display: "only screen" !default;
$media-max-width: 768px !default; //~ 768px
$media-table-responsive-query: "#{$media-display} and (max-width: #{$media-max-width})" !default;

//Responsive tables
$include-responsive-tables: true !default;
$table-responsive-pinned-background: #FFF !default; 
$table-responsive-pinned-border-right: 1px solid #CCC !default;
$table-responsive-pinned-border-left: $table-responsive-pinned-border-right !default;
$table-responsive-wrapper-border-right: $table-responsive-pinned-border-right !default;