Skip to content 
Table - CSS Component
The Table component can be used imported from:
Playground
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.
| Name | Age | Country |
|---|---|---|
| John Doe | 30 | Switzerland |
| John Smith | 35 | Spain |
Caption
You can add a caption to the table by using the <caption> tag.
| Name | Age | Country |
|---|---|---|
| John Doe | 30 | Switzerland |
| John Smith | 35 | Spain |
Cells
config
The config attribute in <td> or <th> tags can change the positioning of the content:
| Left | Center | Right |
zebra
We can use the zebra attribute to set a highlighted background in the even rows
| Cell 1-1 | Cell 1-2 | Cell 1-3 |
| Cell 2-1 | Cell 2-2 | Cell 2-3 |
| Cell 3-1 | Cell 3-2 | Cell 3-3 |
Using zebra="odd" will apply it to odd ones:
| Cell 1-1 | Cell 1-2 | Cell 1-3 |
| Cell 2-1 | Cell 2-2 | Cell 2-3 |
| Cell 3-1 | Cell 3-2 | Cell 3-3 |
highlight
We can can highlight an entire column of the table just placing the highlight attribute in the header of the corresponding column:
| Head 1 | Head 2 | Head 3 |
| Cell 1 | Cell 2 | Cell 3 |
Browser support
Detected engine:
Chromium
Webkit
Gecko