The HTML Table Editor

Overview

The Table Editor is an intuitive interface to design your table. When loaded, you will see your table on the right, the Table Editor form on the left and the Column Editor and Get Code buttons above the top right of the table. Some options require a save to update your table on the right. Some options will update it in real time.

Global Options

The Table Editor form allows you to choose and change global options about your table. It is split into two sections: ‘General Options’ and ‘Table Design’.

General Options

The ‘General Options’ section allows you to choose your table name, table type and whether or not you want the column picker. The table name is required in order to save.

Table Types

Tables can be two main types. The first type is called ‘Regular’. In a ‘Regular’ table, when the size of the screen shrinks smaller than the table, all rows will become scrollable. This works best for small tables. The second option, ‘Dynamic’, allows you to mark columns as horizontally static and horizontally scrollable. This splits the table into two halves, so you can have important information such as names on the static left side, and less important data such as aggregations on the scrollable right side. This is particularly useful for scenarios with many columns.

Visual Design

The ‘Table Design’ section of the Table Editor is for visual design. You can choose header background colour, header text colour, font and whether to show or hide our watermark. These options allow you to align the table with your brand.

Column Editor

If you click on the ‘Column Editor’ in the top right of the table, the Table Editor will be replaced with the ‘Column Editor’. This form allows you to choose individual settings for each column. The ‘Width’ setting provides a static width in pixels for your column. If columns exceed the size of the screen, they will scroll. The ‘Column Type’ setting, only for ‘Dynamic’ tables, allows you to choose which columns should always be seen on the left.

Get Embed Snippet

Once you are happy with your design and have clicked ‘Save’ to save the table, you can click the ‘Get Code’ button to copy a small HTML snippet that will allow you to paste the table wherever you need in your own website.