Tables

Brienne Wong
Brienne Wong
  • Updated

You can add a table from the toolbar:

toolbar_table.png

Change table options

You can change the table options by hovering over the cog icon at the top right of the table.

settings_table.png

Hide borders

To hide the table borders, toggle the Display borders option.

hidedisplayborders.png

You can also choose to show only the row borders.

Change border color

You can change the border color for your tables from the Styleguide settings.

Go to the Appearance tab and edit the Table border color.

👉 Note: This will apply across all the tables in your styleguide.

styleguidesettings_appearance.png

Change the text alignment

For example, you can change the text alignment in your table to be top and left-aligned.

hidedisplayborders.png

Change table background

You can add a header row to your table by highlighting the 1st row of the table, and you can also enable alternating row highlighting, like such:

Property

Description

lorem ipsum

In faucibus urna nec egestas pellentesque.

magna dictum

Pellentesque euismod nibh vel enim pharetra, vitae pulvinar urna efficitur. Sed viverra velit massa, non suscipit arcu luctus ut.

libero ultricies

Quisque orci ligula, pharetra non suscipit eget, ultrices at nulla.

ligula elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

non posuere

Donec felis velit, fringilla et pellentesque at, finibus et dui. 

Both of these options are available in the settings popover:

You can also change the background colors for both header rows and highlights in the Appearance section of the styleguide settings.

Use tables for multi-column layouts

You can use tables to create multiple columns of text and to arrange text on the page.

Add images to tables

You can use images in tables to create flexible layouts in your styleguide.

Some examples

 

Was this article helpful?