• CSS Framework for restaurant sites

Getting Started

Download Content Typography Cards Images Navigation Carousel Sidebar Button Accordion Grid Forms Tabs Gallery Tables Menu Grid Media Queries Help classes

Tables

Basic Tables

Design beautiful tables using just a few classes and HTML5 syntax. To design a basic table use the class .basic-table and .table-container. The .table-container adds a 1em/16px padding all the way around. To center the contents of the table use the class .table-center

Basic Table

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table table-center">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Striped Row Table

Add the class .striped-table to style the tables as stripped

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table striped-table">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Striped Column Table

Add the class .striped-col-table to style the tables as striped columns

Striped Column Table

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table striped-col-table">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Table lined

Add the class .table-lined to style the tables with lines as seprator for rows

Striped Column Table

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table table-lined">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Table lined Colunms

Add the class .table-lined-col to style the tables with lines as seprator for columns

Striped Column Table

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table table-lined-col">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Bordered Table

Add the class .table-border to style the tables with lines as seprator for columns and rows

Striped Column Table

Table caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

HTML Structure: 

	 <table class="basic-table table-border">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>

Responsive Table

Add the class .table-responsive to make the table responsive with a scroll bar along the x-axis

Responsive Table - Scroll Bar

Table caption
Table Heading Table Heading Table Heading Table Heading Table Heading
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data

HTML Structure: 

  <div class="table-container table-responsive">
	 <table class="basic-table">
           <caption>Table caption</caption>
            <thead>
                <tr>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                  <th>Table Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
                <tr>
                  <td>Table Data</td>
                  <td>Table Data</td>
                  <td>Table Data</td>
                </tr>
            </tbody>
          </table>
</div>

See More Examples