How to use Table elements

How to use Table elements

Use Table elements to organize information into rows and columns. You can create a blank table, import existing data, paste content from a spreadsheet, or generate sample data with AI.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. You can access Table elements from Wireframe elements in the bottom toolbar or from the Elements tab in the Wireframe Library.

Add a Table element

Visily provides several ways to create a table, depending on whether you want to start with sample data, define a custom size, import existing content, or generate data with AI.
  1. Open the board where you want to add a table.
  2. Open Wireframe elements from the bottom toolbar or the Wireframe Library.
  3. Under Table, choose one of the following options:
    1. Table: Add a sample 5 × 5 table with placeholder data.


    2. Select Columns × Rows: Choose a custom number of columns and rows.
    3. Import from CSV: Create a table from an uploaded CSV file.
    4. Paste from Clipboard: Paste copied spreadsheet or CSV data into a table, row, or column.
    5. Generate with AI: Generate sample table content from a text prompt. For example: Create a customer list with names, email addresses, subscription plans, and account statuses.


  4. After adding the table, move, resize, or customize it as needed.
Notes
When pasting data, make sure the copied rows and columns match the area where you want to place them.

Edit and manage a Table element

Select the table, a row, or a column to view the available editing options. The toolbar changes based on what you select.

Manage the table

Select the entire table to open its toolbar. The available actions include:
  1. Send to AI Chat: Send the table to the Visily AI Assistant for further modifications or use it as a reference for a new design generation.
  2. Table style: Choose a preset table style to quickly update the table’s appearance.
  3. Header: Show or hide the header row, depending on how you want to organize the table content.
  4. Sizing and spacing: Distribute row or column sizes evenly, adjust the table width and height, and change the cell padding.
  5. Edit style: Customize the table color, layer opacity, border and gridline styles, corner radius, and shadow.
  6. Text alignment: Align the content within cells.
  7. Clear cells: Remove the content from cells while keeping the table structure.
  8. Save as template: Save the table and its content as a reusable template.
  9. Export: Export the table as an image or PDF, or send it to Figma.
  10. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Manage a column

Select a column to open its toolbar. The available actions include:
  1. Column type: Change how content is displayed in the column. Available types include: Text/Number, Text & Subtext, Avatar, Avatar & Text, Image, Rating, Tag, Button, Checkbox, Radio, Switch, Progress Bar, Textbox, and Dropdown Button.
  2. Sizing and spacing: Adjust the column width, row height, and cell padding.
  3. Background color: Change the background color of the selected column.
  4. Text alignment: Align the content within the column’s cells.
  5. Fill content: Quickly populate the selected column with content. 
  6. Clear cells: Remove all content from the selected column while keeping the column structure.
  7. Duplicate: Create a copy of the selected column and its content.
  8. Delete: Remove the selected column from the table.

Manage a row

Select a row to open its toolbar. The available actions include:
  1. Sizing and spacing: Adjust the row height and cell padding.
  2. Background color: Change the background color of the selected row.
  3. Text alignment: Align the content within the row’s cells.
  4. Clear cells: Remove all content from the selected row while keeping the row structure.
  5. Duplicate: Create a copy of the selected row and its content.
  6. Delete: Remove the selected row from the table.

Info
For the header row, you can add icons next to the header text to make column labels easier to identify.

Note

  1. When you select a table, row, or column, click the + icon to add a new row or column in the available position, such as above, below, to the left, or to the right.
  2. Large tables may need to be resized to fit within a screen or container.
  3. To quickly format all cells in a column, edit any cell and select Apply to other rows from the menu. You can sync the style, size, content, icon, or all attributes. The selected changes are then applied to the remaining cells in that column.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • Wireframe Elements in Visily

      Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

    • Diagram Elements in Visily

      Use diagram elements to brainstorm ideas, map processes, and model structured systems directly on your Visily board. You can build a diagram from individual elements or start with a ready-made template. Before you start Make sure you have permission ...

    • How to use Image elements

      Use Image elements to add uploaded images, stock photos, AI-generated visuals, or placeholders to your designs. Before you start Make sure you have permission to edit the board. The availability of workspace images and some AI features may depend on ...

    • How to use Text and Link elements

      Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...

    • How to add elements to the canvas

      Add elements to the canvas to create and customize your designs. You can add basic elements from the bottom toolbar or choose ready-made elements from the Wireframe Library and Diagram Library. Before you start Make sure you have permission to edit ...