How to create a table on your website

The next button in the top bar is the table creation button. This button allows you to create tables to organize data so that it is more readable for users. Here is where the table button is located:

Screenshot of the WYSIWYG text editor table creator/editor

When you click on the table button, you will be shown a dialog box full of options for customizing your table.

Note: some of these options will not be available, even if they appear to be present in the text editor box before you save. This tutorial will cover only the features available for use.

Step 1: Fill out appropriate fields

Screenshot of table menu

Probably the most important setting when creating a table is the number of rows and columns. You will find this on the left side of the dialog box, as highlighted below:


Table menu with rows and bolumns highlighted

Your other option when creating a table is selecting your header:

Screenshot with table heading options

Step 2:  View finished table

This is important for two reasons: it changes how the table itself looks (which can be preferred over the standard look depending on your personal preference) and it gives more weight to the data in those cells, which is important for search engine optimization. Here is an example of a table that has both the first column and row set as a header. You may also choose to make only the first row as a header or only the first column or even create a table without headers.

Screenshot of a finished table with formatting

You can also format the text within a table as you see fit. Here is the full view of a table on a page with many different text formats:

Screenshot of table on a page

Since the text inside of a table has the same limitations as body text, you can even put tables inside of tables. To do this, you simply select the table cell that you wish to insert your table inside and use the same table button that you used to create your initial table. 

To edit a table that has already been made, right click on the table and select Table Properties. This will take you back to the same table formatting screen that you filled out upon creating the table and you should be able to make the changes you wish.  

Screen shot of editing a table


Note: These tables are responsive and, when used on mobile devices, they will change shape in order to best fit the screen or window size. Here you can see an example of our table in a smaller window: 

 Table in a condensed window

Now, let's move on to the button next to tables: the horizontal line.