Book page

How to Use Tables

Open Social
Open Social Open Social • 17 November 2017

One of the options you have when you create a page is to add a table. It's one of the buttons you can find in the editor of the page. 

When to use a table

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example, a person and their age, or days in the week, or the timetable for an event.

In short: tables are used to display data.

We see all too often that tables are used as a layout. This isn't recommended unless you know how to use this function properly so that it's responsive on all devices. Since web pages are now being viewed on mobile as well, we need to make sure our content adapts and responds to the device it is shown on.

Responsive layouts

We use responsive layouts on Open Social. This means the layout is adjusted to smaller mobile screens so that it looks good. For example, sidebars are relocated and the menu behaves differently. We have found that tables are not very responsive. When you create a two-column table for a large screen, it will most likely look bad on a small mobile screen. There are cases where this is not a big problem; for example, if there is only simple text in a table (labels) then it won't be a problem for small screens. But if you have an image that's 500-pixel wide on a table, then you will most likely run into problems.

How to create a table

In the editor, you can click on the table icon to create a new table. If you have an existing table, you can use right-mouse click to edit the table. When you see the table settings window, the most important field to look at is the width field. It's recommended set this to 100%

 

Using 100% ensures that the table will not be wider than the width of the user's screen.

Example table
Name Age Gender
Chris Hall 34 Male
Michelle Clark 45 Female
Andrew Roberts 24 Male
Paul Harris 76 Male

Tables divide columns equally by default. If you want to adjust the width of a column, simply drag the right border of the cell (all rows will be updated with this action).

Want to know more about tables? Read this introduction by Mozilla.