Classic
Tagging
Examples
Working with Tables

Working with Tables

Learn how to create tables using the Table tag.

Tagging your UI elements

  1. Select the parent container containing the items that you want in your table.

  2. Next, go to Step 2: Tag interactive elements on the Locofy.ai plugin.

  1. Select the Table tag.

  2. Hit the Preview button to view the table in action.

Customise Table Attributes

You can customise the table properties and set the table header & footer as well as have striped rows.

Note: The Striped property does not work if the rows have spacing between them.

Layout Options

Just like the Layout options present in the Step 3 of the plugin, you can choose to hide the component, set a border radius, and also adjust its width and height.

Rows

Locofy.ai automatically detects the rows present in your table. You can edit properties of each row.

  1. You can click the edit button on any of the row to modify its layout properties.

  2. Once you click the button, you can now choose the row type. The row can be the header, body or footer.

  1. You can click on Styling & layout button to customise the styling based on different breakpoints. You can also apply advanced attributes to each row.

Cells

Each row has multiple cells. With Locofy.ai, you can customise each of these calls.

  1. You can click the edit button on a cell to start customising its properties.

  2. Once you click the button, you can now edit the column and row spans.

  1. You can click on Styling & layout button to customise the styling based on different breakpoints. You can also apply advanced attributes to each row.

Advanced Attributes

You can add an ID attribute to the table as well as any custom attribute to improve accessibility, SEO, etc.

Working with CSS GridsTagging a Drawer