FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Stencils

Articles in this section

    Tables

    Also in this section

    Tables

    Tables provide access to precise numbers and specific information in large, dense data sets. They allow users to scan, compare, and analyze data in multiple directions – in the order of their choice – and take action based on those insights.

    In complex apps designed for logistics, project management, sales, customer relations, or human resources, the majority of screens may contain – or simply be – a grid or table.

    Our Table stencil offers a completely visual editing experience and lets your team quickly customize single or multiple table cells.

    In this article we’ll show you how to add and format tables, and how to customize your columns, rows, cells and text.

    Paste lists and CSV data in table format

    You can paste CSV data directly into an existing table, just as you would with our Chart and Graph stencils. 

    However, if you don’t have a table already on your page, the Paste in Format feature lets you turn lists and CSV data into instantly populated tables:

    1. Copy a list or CSV from your desktop
    2. Use Ctrl/Cmd +V to paste that data onto your Moqups page
    3. Click the Table button on the Pick a Format modal

    Adding and resizing tables

    The Table stencil is found in the Stencils Library and, just like all stencils, can be added to the page, as objects, by single click or drag and drop. When you add a table, the cursor is active in the first cell, so you can start typing right away.

    To resize and rescale, drag any of the adjustment handles, and hold down Shift if you want to maintain the tables’ aspect ratio.

     
    • Press Tab to move to the next cell when you are entering data
    • Press Enter on the last cell to create a new row

    Stick objects, icons and images to tables

    Like our Notes & Annotations and Containers, our Table stencil has sticky capability. Although Tables are not sticky by default, you can quickly turn their stickiness on (and off) in the Format Panel.

    Then, you can stick all kinds of other objects – like icons, avatars, or images – to your table, and they’ll stay in place as you move the table.

    Formatting table borders, padding, zebra stripes, and fonts

    Before diving into your more detailed editing, you can use the dedicated section in the Format Panel to make initial styling decisions about the table as a whole. 

    Here you can choose to show or hide borders, adjust cell padding, or add zebra stripes to alternate rows or columns.

    You can also select the table’s font family and size, set border attributes, or add a drop shadow:

    In the text editing section below, we explain how to to use the Quick Format toolbar to further style, color and add links to selected text within the Table

    Managing and customizing table columns, rows, and cells

    Click the Edit Data button below the table (or double-click the stencil itself) to enter the table’s Edit Mode.  

    Once in edit mode, you can:

    • Duplicate, insert, move, delete or resize rows and columns
    • Merge or split cells
    • Change the text color and background of selected cells

    Clicking anywhere on the chart will reveal the pop-up toolbar where you can perform these functions.

    And, as you’ll see further below, the toolbar will also let you clear, edit, align, style, color, highlight, and apply links to your text.

    For all of the following functions, your table must be in edit mode:

    Duplicate, insert, or delete rows and columns

    To duplicate a row or column – including its existing text – click one of the dots along the horizontal or vertical headers:
     

    To insert an empty row or column, click the Insert Row or Insert Column buttons on the toolbar:
     

    To delete a row or column, make your selection and click the trach button on the toolbar:
     

    Move rows and columns up and down or sideways

    To move existing rows or columns within your table, make your selection and then use the Move arrows on the far right of the toolbar.
     

    Resize or distribute rows and columns

    To resize rows and columns, use the lines between their headers. If you want to set the rows and columns to equal sizes, just click the Distribute Cell Heights or Distribute Cell Widths buttons.
     
    04._Tables_-_Resize_and_distribute_cells.gif

    Merge and split cells

    Use the Merge Cells or Split Cells buttons in the pop-up toolbar to perform those actions on selected cells:
     
    05._Tables_-_Merge_and_Split_Cells.gif

    Cell background and text color

    The toolbar also lets you select the text color and background color for individual cells or selections. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data.
     

     
    Cell color also comes in handy if you want to create in-table heatmaps – where higher numbers correspond to darker or more saturated cell backgrounds.
     
    07._Tables_-_Heat_Map.gif

    Editing the text and content of tables

    Click the Edit Data button below the table to enter the table’s Edit Mode.  

    Once in edit mode, you can select, clear, edit, align, style, color, highlight, and apply links to your text. Clicking anywhere on the table will reveal the table toolbar where you can perform these functions.

    And, as we discussed above, the toolbar will also let you insert, move, delete or distribute rows and columns; merge or split cells; change the text color and background of selected cells.

    Select, color, or clear table stencil content

    Click the Edit Data button (or double-click on the table) to reveal the table headers and toolbar. The round button in the top-left corner will Select all of the table’s cells; you can also use Cmd+A.

    Now you can use the toolbar to change the font color and background color throughout the entire table.

    Once the entire table has been selected, you can also use your keyboard’s Delete key to clear all existing data and return to a blank table.

     
    08._Tables_-_Clear_table_stencil_content.png

    Text alignment in tables

    Select a row or a column’s header, or choose a single cell or selection of cells. Then, use the toolbar to adjust the text’s horizontal and vertical alignment:
     
    09._Tables_-_Text_alignment.gif

    Rich-text editing to style, color and add links

    With a cell selected, press Enter/Return or double-click to edit the text. If you simply want to replace the text, then just start typing!

    While you’re in edit mode, you can use either the cell-editor or the table toolbar to format, style, color and highlight selected text, or to add links.

     

    While in edit mode:

    • Hit the Tab key to quickly navigate between table cells.
    • Press Shift+Tab to go back to the previous cell.