# table-size

The markup of every demo on <https://kuiper.oeds.it/table-size/>, 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-`.

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

```html
<table class="table-xs">
 <caption>xs</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>
```

## size

```html
<table class="table-s">
 <caption>s</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>
```

## size

```html
<table class="table-m">
 <caption>m</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>
```

## size

```html
<table class="table-l">
 <caption>l</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>
```

## size

```html
<table class="table-xl">
 <caption>xl</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>
```
