Tables

Use .v-table on <table> elements. Control density with data-density. Row hover is on by default.

Apply .v-table to a <table> element. It styles the header, rows, and cell padding for you. Row hover is on by default.

Default

A plain .v-table with no extra attributes gives a clean, medium-density table.

Consultant Client Status
Emma Berg Acme Corp Active
Lars Holm TechVent Active
Mia Andersson FinHub Bench
Show editor
<table class="v-table">
  <thead>
    <tr>
      <th>Consultant</th>
      <th>Client</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma Berg</td>
      <td>Acme Corp</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Lars Holm</td>
      <td>TechVent</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Mia Andersson</td>
      <td>FinHub</td>
      <td>Bench</td>
    </tr>
  </tbody>
</table>

Density

Set data-density to compact or relaxed to control cell padding.

Consultant Client Booked Invoiced
Emma Berg Acme Corp 34.5 / 37.5h 92%
Lars Holm TechVent 28.0 / 37.5h 75%
Mia Andersson FinHub 37.5 / 37.5h 100%
Show editor
<table class="v-table" data-density="compact">
  <thead>
    <tr>
      <th>Consultant</th>
      <th>Client</th>
      <th>Booked</th>
      <th>Invoiced</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma Berg</td>
      <td>Acme Corp</td>
      <td>34.5 <span class="ink-subtle">/ 37.5h</span></td>
      <td>92%</td>
    </tr>
    <tr>
      <td>Lars Holm</td>
      <td>TechVent</td>
      <td>28.0 <span class="ink-subtle">/ 37.5h</span></td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Mia Andersson</td>
      <td>FinHub</td>
      <td>37.5 <span class="ink-subtle">/ 37.5h</span></td>
      <td>100%</td>
    </tr>
  </tbody>
</table>
Consultant Client Booked Invoiced
Emma Berg Acme Corp 34.5 / 37.5h 92%
Lars Holm TechVent 28.0 / 37.5h 75%
Mia Andersson FinHub 37.5 / 37.5h 100%
Show editor
<table class="v-table" data-density="relaxed">
  <thead>
    <tr>
      <th>Consultant</th>
      <th>Client</th>
      <th>Booked</th>
      <th>Invoiced</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma Berg</td>
      <td>Acme Corp</td>
      <td>34.5 <span class="ink-subtle">/ 37.5h</span></td>
      <td>92%</td>
    </tr>
    <tr>
      <td>Lars Holm</td>
      <td>TechVent</td>
      <td>28.0 <span class="ink-subtle">/ 37.5h</span></td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Mia Andersson</td>
      <td>FinHub</td>
      <td>37.5 <span class="ink-subtle">/ 37.5h</span></td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

Caption and footer

Use <caption> for a table description and <tfoot> for summary rows. Both are styled automatically.

Booked hours by consultant — H1 2026
Consultant Jan Feb Mar Apr
Emma Berg 148 156 142 150
Lars Holm 132 140 138 145
Mia Andersson 150 148 155 152
Total 430 444 435 447
Show editor
<table class="v-table">
  <caption>Booked hours by consultant — H1 2026</caption>
  <thead>
    <tr>
      <th>Consultant</th>
      <th>Jan</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Apr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma Berg</td>
      <td>148</td>
      <td>156</td>
      <td>142</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Lars Holm</td>
      <td>132</td>
      <td>140</td>
      <td>138</td>
      <td>145</td>
    </tr>
    <tr>
      <td>Mia Andersson</td>
      <td>150</td>
      <td>148</td>
      <td>155</td>
      <td>152</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>430</td>
      <td>444</td>
      <td>435</td>
      <td>447</td>
    </tr>
  </tfoot>
</table>