Basic tables
Rows and columns; numbers on the right
A table
A caption names it; headers scope their column.
| Receipt | Customer | Items | Total | Status |
|---|---|---|---|---|
| R-041185 | Ethan Okoro | 7 | $34.23 | Completed |
| R-041184 | Noah Cohen | 2 | $12.96 | Completed |
| R-041183 | Amara Brooks | 1 | $3.78 | Completed |
| R-041182 | Grace Ivanova | 12 | $55.23 | Completed |
| R-041181 | Walk-in | 10 | $39.53 | Completed |
Show the code
<div class="table-wrap" data-allow-x data-scroller="Latest sales"> <table class="table stack-sm"> <caption class="sr-only">Latest sales</caption> <thead> <tr> <th scope="col">Receipt</th> <th scope="col">Customer</th> <th scope="col" class="r">Items</th> <th scope="col" class="r">Total</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td data-label="Receipt"> <span class="mono">R-041185</span> </td> <td data-label="Customer">Ethan Okoro</td> <td data-label="Items" class="r">7</td> <td data-label="Total" class="r">$34.23</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041184</span> </td> <td data-label="Customer">Noah Cohen</td> <td data-label="Items" class="r">2</td> <td data-label="Total" class="r">$12.96</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041183</span> </td> <td data-label="Customer">Amara Brooks</td> <td data-label="Items" class="r">1</td> <td data-label="Total" class="r">$3.78</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041182</span> </td> <td data-label="Customer">Grace Ivanova</td> <td data-label="Items" class="r">12</td> <td data-label="Total" class="r">$55.23</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041181</span> </td> <td data-label="Customer">Walk-in</td> <td data-label="Items" class="r">10</td> <td data-label="Total" class="r">$39.53</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> </tbody> </table> </div>
Compact, with totals
Denser rows; the total in the foot.
| Receipt | Customer | Items | Total | Status |
|---|---|---|---|---|
| R-041185 | Ethan Okoro | 7 | $34.23 | Completed |
| R-041184 | Noah Cohen | 2 | $12.96 | Completed |
| R-041183 | Amara Brooks | 1 | $3.78 | Completed |
| R-041182 | Grace Ivanova | 12 | $55.23 | Completed |
| R-041181 | Walk-in | 10 | $39.53 | Completed |
| Total | $145.73 | |||
Show the code
<div class="table-wrap" data-allow-x data-scroller="Latest sales, compact"> <table class="table stack-sm compact"> <caption class="sr-only">Latest sales, compact</caption> <thead> <tr> <th scope="col">Receipt</th> <th scope="col">Customer</th> <th scope="col" class="r">Items</th> <th scope="col" class="r">Total</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td data-label="Receipt"> <span class="mono">R-041185</span> </td> <td data-label="Customer">Ethan Okoro</td> <td data-label="Items" class="r">7</td> <td data-label="Total" class="r">$34.23</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041184</span> </td> <td data-label="Customer">Noah Cohen</td> <td data-label="Items" class="r">2</td> <td data-label="Total" class="r">$12.96</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041183</span> </td> <td data-label="Customer">Amara Brooks</td> <td data-label="Items" class="r">1</td> <td data-label="Total" class="r">$3.78</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041182</span> </td> <td data-label="Customer">Grace Ivanova</td> <td data-label="Items" class="r">12</td> <td data-label="Total" class="r">$55.23</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> <tr> <td data-label="Receipt"> <span class="mono">R-041181</span> </td> <td data-label="Customer">Walk-in</td> <td data-label="Items" class="r">10</td> <td data-label="Total" class="r">$39.53</td> <td data-label="Status"> <span class="badge badge-success"> <i class="ti ti-circle-check"> </i>Completed</span> </td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Total</td> <td class="r">$145.73</td> <td> </td> </tr> </tfoot> </table> </div>