Tables are NOT usually recommended. Because of the way tables function, they are not mobile friendly and we suggest using Columns instead.
Tables that are narrower than a smartphone screen can work well, but wider tables will be difficult to use on a small display. Wide tables will often require left and right scrolling making them generally unliked. That said, following is how to use a table if it is needed.
Creating a Table
- Place your cursor where you want the table to display
- Click the plus sign in the black square to the left of your cursor
- Click the Table icon
- Use the tiny up / down arrows or your keyboard to indicate the number of rows and columns you want to be included in your table.
- Click the checkmark to confirm.
You will now see a grid based on the number of rows and columns you selected. Place your cursor inside one of the cells and type or copy and paste content into each cell.
Sample Tables
Row 1 Col 1 Content | Row 1 C 2 Content | R 1 C 3 |
Row 2 Col 1 | Row 2 C 2 Content | R 2 C 3 Cont. |
Row 3 Col 1 Content | Row 3 C 2 | R 3 C 3 Cont. |
Same Table on a Small Screen
Row 1 Col 1 Content | Row 1 C 2 Content | R 1 C 3 |
Row 2 Col 1 | Row 2 C 2 Content | R 2 C 3 Cont. |
Row 3 Col 1 Content | Row 3 C 2 | R 3 C 3 Cont. |
Editing Tables
Editing the content of a table is just a matter of typing new text. However, you may discover after creating your table that you need to structure the table differently . . . more or less columns, more or less rows, etc.. You don't have to start over.
Click directly on the table you've created. A small black rectangle will popup. Use the icons to make needed changes to the structure of your table.
Basic Rules of Table Display:
- Cells align text to the left horizontally and centered vertically.
- Table columns adapt to the width of the content in each cell. The width of columns in a table will adjust to the cell with the most content.
- On the wider table, where there is room for the content to display on one line, they look evenly spaced vertically. But on a narrower display where lines have wrapped so some have more lines than others, they don't align at the top, they align in the middle.
- A table will display with borders around all the cells.
- Modifying the CSS can change the way your tables display. Any changes you make will apply to all tables created on your website.