Creating a Good Looking Table

April 5th, 2012
Tables are important for segmenting information for legibility. A basic table can be a bit bland though. The CMS has a simple table style built in that makes the table look better, and helps divide the content.

Step-by-Step Instructions »

 

1.

Login to the CMS

2.

Navigate to the page where you would like to create the table and click Edit Content. In this tutorial, I am going to add a table to the Visual Arts Press page in About SVA.

3.

In the Content Editor, click “Kitchen Sink Drawer”, which will open up more button options.

 4.

Click your cursor in the Content Editor text area where you want to insert the table.

5.

Click “Insert/Edit Table”

6.

A dialog box pops up where you can enter your table information. As you can see, you can choose how many rows and columns you want. The other information you do not need to edit until later.

Note: Personally, when i create a table, I like to change the border height to 1. After I have created the table and added the class, I change the border back to 0.

7.

Add the number of rows or columns you need. You can add and remove rows and columns later, so you do not have to be exact. Just make an estimate of how large of a table you need.

Click Insert

8.

The table gets inserted into the Content Editor. The cursor is set initially in the first column, first row. Because we changed the border to 1, we can see the table edges. This just makes it easier to add copy into the table. You can use the keyboard directional arrows to switch from cell to cell.

Add some copy to each of your cells.

9.

To the right of the “Insert/Edit Table” button, there are other options for editing the table. With these buttons you can add/delete a table row or column and merge table cells.

When adding a table row or column, the placement of the new row/column is based on the placement of the cursor in the current cell.

When deleting a row/column, place the cursor in the row/column you would like to delete.

10.

Once you have the table info entered, we need to add some custom styling. Click “Insert/Edit Table” again

11.

First, set the border back to 0.

Click the class dropdown menu and choose simple_table

Click Update

12.

The table will look a little funny in the Content Editor. Click Publish Changes, then View This page

13.

The simple_table class we added gives the table the grey underlines.

That’s how you tackle tables.