Responsive HTML Tables

A responsive component for displaying data in a structured, grid-like format. 4 formatting options.

Creature	Origin Mythology	Notable Feature
Phoenix	Greek	Regenerates from ashes
Dragon	Multiple cultures	Fire-breathing
Unicorn	European	Single horn with healing powers
Kraken	Norse	Giant sea monster
Chimera	Greek	Part lion, goat, and snake
Griffin	Ancient Egyptian and Greek	Body of a lion and the head and wings of an eagle

Code Example Shortcut: z-table-1

<table class="responsive-table striped">
     <thead>
         <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         </tr>
     </thead>
     <tbody>
         <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
     ...
     </tbody>
 </table>

Creature	Origin Mythology	Notable Feature
Phoenix	Greek	Regenerates from ashes
Dragon	Multiple cultures	Fire-breathing
Unicorn	European	Single horn with healing powers
Kraken	Norse	Giant sea monster
Chimera	Greek	Part lion, goat, and snake
Griffin	Ancient Egyptian and Greek	Body of a lion and the head and wings of an eagle

Code Example Shortcut: z-table-2

<table class="responsive-table zebra">
     <thead>
         <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         </tr>
     </thead>
     <tbody>
         <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
     ...
     </tbody>
 </table>

Creature	Origin Mythology	Notable Feature
Phoenix	Greek	Regenerates from ashes
Dragon	Multiple cultures	Fire-breathing
Unicorn	European	Single horn with healing powers
Kraken	Norse	Giant sea monster
Chimera	Greek	Part lion, goat, and snake
Griffin	Ancient Egyptian and Greek	Body of a lion and the head and wings of an eagle

Code Example Shortcut: z-table-3

<table class="responsive-table striped zebra">
     <thead>
         <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         </tr>
     </thead>
     <tbody>
         <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
     ...
     </tbody>
 </table>

Creature	Origin Mythology	Notable Feature
Phoenix	Greek	Regenerates from ashes
Dragon	Multiple cultures	Fire-breathing
Unicorn	European	Single horn with healing powers
Kraken	Norse	Giant sea monster
Chimera	Greek	Part lion, goat, and snake
Griffin	Ancient Egyptian and Greek	Body of a lion and the head and wings of an eagle

Code Example Shortcut: z-table-4

<table class="responsive-table">
 <thead>
     <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
     </tr>
 </thead>
 <tbody>
     <tr>
     <td>Data 1</td>
     <td>Data 2</td>
     <td>Data 3</td>
     </tr>
 ...
 </tbody>
</table>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.