Structured data grid for comparing and analyzing rows.
<table class="d-table dialtone-doc-table"> <caption class="d-table__caption">Office List</caption> <thead> <tr> <th scope="col">Office</th> <th scope="col">Country</th> <th scope="col" width="10%">Employees</th> <th scope="col">Contact</th> </tr> </thead> <tbody> <tr v-for="i in examples"> <th scope="row">{{ i.office }}</th> <td>{{ i.country }}</td> <td>{{ i.size }}</td> <td>{{ i.contact }}</td> </tr> </tbody> </table>
<table class="d-table dialtone-doc-table d-table--striped"> <caption class="d-table__caption">Office List</caption> <thead> <tr> <th scope="col">Office</th> <th scope="col">Country</th> <th scope="col" width="10%">Employees</th> <th scope="col">Contact</th> </tr> </thead> <tbody> <tr v-for="i in examples"> <th scope="row">{{ i.office }}</th> <td>{{ i.country }}</td> <td>{{ i.size }}</td> <td>{{ i.contact }}</td> </tr> </tbody> </table>
Use the caption element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
We provide .d-table__caption for a basic caption style, but you can also use utility classes to apply custom styles as needed.
Class
|
Applies to
|
Description
|
|---|
Table documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope