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.

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

    01._Table_-_Add_and_resize.gif

     

    Press Tab on the last row to add new rows to your table.

    Formatting table borders, padding, 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, select font family and size, set border attributes, or add a drop shadow:

    02._Table_-_Format_borders__padding__and_fonts.gif

    In the Rich 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

    Customizing table columns, rows, and cells

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

    Once in edit mode, you can insert, delete or resize rows and columns; merge or split cells; and change the cell background or text color. Clicking anywhere on the table 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.

    Insert or delete rows and columns

    Once you’re in edit mode, the dots along the headers let you insert rows and columns in that particular position. To delete a row or column, select the appropriate header, and click the trash bin in the table’s toolbar.
     
    03._Table_-_Insert_and_delete_rows___columns.gif

    Resize 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 colour

    The toolbar also lets you select the text color and background color for individual and groups of cells. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data.
     
    06._Tables_-_Cell_background_and_text_colour.gif
     
    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 clear, edit, align, style, color, highlight, and apply links to your text. Clicking anywhere on the table will reveal the pop-up toolbar where you can perform these functions. 

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

    Clear table stencil content

    If you want to get rid of our placeholder text – and begin with a tabula rasa – before adding your own data, just click the Edit Data button (or double-click on the table) to reveal the Table headers and toolbar. Then use the Select all button in the upper-left corner (or Cmd+A) and hit delete on your keyboard.
     
    08._Tables_-_Clear_table_stencil_content.png

    Text alignment in tables

    Once you have selected a row or column’s header, you can 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 the Quick Format toolbar to format, color and highlight selected text, or to add links.

    10._Tables_-_Rich_Text_Edit.gif

     

    While in edit mode:

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