Brienne Wong
Brienne Wong
  • Updated

You can add a table from the toolbar:

Table function hovered over in toolbar

Change table options

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

Table settings

Hide borders

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

Display borders function toggled off

You can also choose to show only the row borders.

Table with only rows

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.

Appearance section in styleguide settings

Change the text alignment

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

Table settings to show alignment options

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:



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:

All functions toggled on

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.

Table with images

Some examples


Was this article helpful?