Table Basics

Tables are a semantic way to display tabular data. AutoZonePro.com has a few preset classes to quickly change a table theme:

  1. Default Theme
  2. Dark Header Theme
  3. Hover Theme
  4. Scroll Theme (Semi-Responsive)
  5. Stacked Theme (Responsive)
<table>
    <thead>
        <tr>
            <th>Table Heading 1</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan='100%' class="text-center">Table Footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Data 1</td>
            ...
        </tr>
    </tbody>
</table>

Default Theme

Below is an example of what a default (unstyled) table will look like on AutoZonePro.com.

Table Heading 1 Table Heading 2 Table Heading 3
Table Footer 1
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3

Dark Theme

Use the class <thead class="dark"> to create a "dark" header theme.

Table Heading 1 Table Heading 2 Table Heading 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3

Hover Theme

Use the class <table class="hover"> to create a "hover" effect for rows in the body of the table.

Table Heading 1 Table Heading 2 Table Heading 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3

Scroll Theme (Semi-Responsive)

Use the class <table class="scroll"> to create a table that will set overflow-x: auto allowing the user to scroll horizontally to view data that extends beyond the width of the table.

Table Heading 1 Table Heading 2 Table Heading 3
Table Data 1 Longer description of data to show scrolling ability at smaller viewport sizes. Table Data 3
Table Data 1 Longer description of data to show scrolling ability at smaller viewport sizes. Table Data 3
Table Data 1 Longer description of data to show scrolling ability at smaller viewport sizes. Table Data 3
Table Data 1 Longer description of data to show scrolling ability at smaller viewport sizes. Table Data 3

Stacked Theme (Responsive)

Use the class <table class="stack"> to create a table that will "stack" <td> on smaller screens.

Note: Table header cells are hidden in "stacked" mode. Ensure content makes sense without having headers before using.

Table Heading 1 Table Heading 2 Table Heading 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3