Adding tables to your posts

By:
Published: May 30, 2009

You can add tables to your blog/journal posts using the toolbar in the editor. The table-related buttons are on the third row, as shown here:

Table toolbar buttons

You can hover over each button to see its description.

Adding a table

To add a table, click the appropriate button (as shown below) and you’ll be presented with a pop-up window. In this window you can specify how many rows and columns your table will have. Don’t worry about figuring out the exact number of rows and columns needed for your table initially, as you can always add or delete them later.

Insert a table

The only other setting you may need to change in this window is class, which should be set to sortable if you want users to be able to sort the table by clicking on the headers. Note that for the sort functionality to work, you must specify which table cells are header cells.

Specifying header cells

There are two steps involved here.

Step 1

First you must move the top row into the head section of the table. To do this, you must select one or more cells in the row and then click the Table row properties button, as shown here:

Accessing table row properties

Clicking that button gives you another properties pop-up window. In there you must select Table Head from the drop-down menu alongside Row in table part, as shown below:

Table row properties

Click the Update button when you’re done. You should notice the background color of your header cells has turned to gray.

Step 2

Now we must specify that each cell in that header row is a header cell. To do this, we need to highlight just one of the cells and then click the Table cell properties button, as shown here on the left:

Table cell properties

That button pops open the cell properties window, also shown above. In there you need to change Cell type to Header (top right), and then choose Update all cells in row from the drop down menu at the bottom left. Once done, click the Update button.

You should notice that the text in the header cells has now been bolded, similar to those shown below:

Sortable table in editor

Note that the table cannot be sorted in the editor view, but that functionality will be available to users once the post has been published.

Adding/deleting rows and columns

This is quite easy. To add a row or column, simply select a cell in an existing row/column in the table, then click one of the following four buttons:

  • Insert row before
  • Insert row after
  • Insert column before
  • Insert column after

Remember, hovering your cursor over a button reveals its description.

Here’s an example of how to delete a row in the table (deleting a column is similar): Select the first cell in the row you want to delete then click the Delete row button in the toolbar, as shown below:

Delete table row

Alignment

The tables themselves will always be center-aligned, but you do have some control over the alignment of text within the cells. Simply highlight the cell or cells you want to change, then click the Table cell properties button. In the pop-up window that appears, use the Alignment drop-down to toggle between Left, Right and Center aligned text. You can then apply your selection to multiple cells using the drop-down menu at the bottom left of the window. Click the Update when you’re done.

Need to know more?

If there’s anything else you need to know about adding tables to your posts, get at us via the comments.

Leave a Reply

Your email address will not be published.