Minimal customizable table.
| Name | Job | Score | What they said |
|---|---|---|---|
| Doxy | Dev | 100 | I'm cool. |
| Jane | Gamer | 99 | Let's play game. |
| Rob | Racer | 98 | You're not faster than me. |
| Name | Job | Score | What they said |
<table class="zust-table zust-bottom-bordered">
<!-- <thead></thead> is table header-->
<thead>
<!-- <tr></tr> Makes a row-->
<tr>
<!-- <th></th> is cell header - Mostly with bold text-->
<th>Name</th>
<th>Job</th>
<th>Score</th>
<th>What they said</th>
</tr>
</thead>
<!-- <tbody></tbody> is table body-->
<tbody>
<tr>
<!-- <td></td> is simple table cell-->
<td>Doxy</td>
<td>Dev</td>
<td>100</td>
<td>I'm cool.</td>
</tr>
<!-- Add more <tr></tr> for more rows-->
<tr>
<td>Jane</td>
<td>Gamer</td>
<td>99</td>
<td>Let's play game.</td>
</tr>
<tr>
<td>Rob</td>
<td>Racer</td>
<td>98</td>
<td>You're not faster than me.</td>
</tr>
</tbody>
<!-- <tfoot></tfoot> is table footer. It's useful if your table is too long-->
<tfoot>
<tr>
<th>Name</th>
<th>Job</th>
<th>Score</th>
<th>What they said</th>
</tr>
</tfoot>
</table>
A table is borderless by default. Only add class zust-table to make borderless table.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
A table can be bordered, just add class zust-bordered.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
If you want an table with only bottom border then add class zust-bottom-bordered.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table zust-bottom-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
You can also make a table striped, just add class zust-striped. For best look combine it with zust-bordered.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table zust-striped zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
A table can be hoverable.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table zust-hoverable zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
A table can be fullwidth, to use add class zust-fullwidth.
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<table class="zust-table zust-fullwidth zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
A table can be scrollable. Just put the table inside of zust-table-container. It's suggested that you should put long tables inside of table container.
| Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name | Name |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value | Value |
<div class="zust-table-container">
<table class="zust-table zust-bordered">
<thead>
<tr>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
</tbody>
</table>
</div>
By default texts are aligned left. You can change it using text helper easily.
Centered Text
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
Text in RTL
| Number | Pronunciation |
|---|---|
| 1 | One |
| 2 | Two |
| 3 | Three |
| 4 | Four |
<p>Centered Text</p>
<table class="zust-table zust-text-center zust-fullwidth zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>
<p>Text in RTL</p>
<table class="zust-table zust-text-rtl zust-fullwidth zust-bordered">
<thead>
<th>Number</th>
<th>Pronunciation</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
</tbody>
</table>