# table-style

The markup of every demo on <https://kuiper.oeds.it/table-style/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## style

```html
<table>
 <caption>table</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## style

```html
<table class="table-unbordered">
 <caption>table-unbordered</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## style

```html
<table class="table-divider">
 <caption>table-divider</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## style

```html
<table class="table-striped">
 <caption>table-striped</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## style

```html
<table class="table-hover">
 <caption>table-hover</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## style

```html
<table class="table-striped table-hover">
 <caption>table-striped table-hover</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```