Table - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses the <table> tag with the z-table HTML custom attribute.

z-table ​

The z-table is the main parameter used to render the table component. The table component is used to display data in a tabular format. The css component is working exactly like the native HTML table tag.

TIP

You can add a caption to the table by using the <caption> tag.

Users
NameAgeCountry
John Doe3030
Jane Doe25Canada
John Smith35Spain

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Table.css" />
Code
html
<table z-table>
  <caption>Users</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>25</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>35</td>
      <td>Spain</td>
    </tr>
  </tbody>
</table>