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.
In this article
- Paste in Format
- Add and Resize tables
- Table Stickiness
- Format Table Borders, Padding, Stripes and Font
- Manage and Customize Columns, Rows, and Cells
- Edit Table Text and Content
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:
- Copy a list or CSV from your desktop
- Use Ctrl/Cmd +V to paste that data onto your Moqups page
- 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
Move rows and columns up and down or sideways
Resize or distribute rows and columns
Merge and split cells
Cell background and text color
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.
Text alignment in tables
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.