Skip to content

Tables

Tables can be constructed using the table, row, thead, tbody, and cell primitives. However, row is typically replaced with the standard library tr component and cell with th or td:

xml
<table>
  <thead>
    <tr>
      <th>Heading Column One</th>
      <th>Heading Column Two</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Body Column One</td>
      <td>Body Column Two</td>
    </tr>
  </tbody>
</table>

The elements tbody and thead are entirely optional when constructing a table, but can be useful to group rows for styling.

Additionally, table cells can be made to span multiple cells using the colspan (or col-span) attribute. If a table's rows are inconsistent then the last cell of each row will be extended to the necessary length:

xml
<table>
  <tr>
    <td col-span="2">Two column cell</td>
    <td>One column cell</td>
  </tr>
  
  <tr>
    <td>Full row</td>
  </tr>
</table>