quick guide

table for two...

Welcome to tables. Tables are best used to list items, whether those items are a collage of images, a recipe card, a pricing guide, or a list of any kind. Once a table is made, it's quite easy to adjust as needed. Click below to find out more...

Making A Table
Table Properties
Rows And Columns
Cells
Adding/Deleting Rows,
Columns, And Cells

Adjusting An Individual Cell
Merging Cells
Cell Padding
Cell Spacing
Changing A Cell's Color
Side By Side
Table Paths

Making A Table

To make a table, click the first icon in the row:

When you click the icon, a new window will pop up allowing you to create a table:

Rows: Select how many rows (up and down) you want in your table

Columns: Select how many columns (across) you want in your table

Width: Select the width of your rows (100% fills the width of the screen)

The Table Properties Window allows you to select the number of rows (up and down) and columns (across) and adjust the cell spacing and padding.

Once the table is created, most of the icons in Row 3 will activate:

Your new table will appear:

Add your content in each cell:

This will show up on your site like so:

Table Properties

Now, let's continue across Row 3 and see the adjustments you can make.

As you can see, the icons are grouped together. After the first icon (inserting a table), the next two are:

Toggle Borders:

You can toggle the border lines on and off by clicking this icon.

Table Properties:

When clicked, the table properties icon will give you a new window:

Here, you can adjust the table as needed. You can choose your border thickness (or no border at all!), adjust the colors in the cells, and adjust the spacing and padding.

Rows And Columns

Row Properties:

Select a row within the table you would like to modify, then click the Row Properties icon. When clicked, a new window will appear that will allow you to adjust the row properties:

Split Row:

Click this icon to split a selected row, once it's been merged with another cell.

Columns do not have their own properties window, but you can split columns just like you can rows:

Split Column:

Click this icon to split a selected column, once it's been merged with another cell.

Cells
Cell Properties:

When clicked, a new window will appear that will allow you to adjust the cell properties:

Much like the Row Properties Window, the Cell Properties Window allows you to adjust an individual cell as needed.

Adding/Deleting Rows, Columns, And Cells

The next group of icons all correspond to the adjustment of the rows, columns, and cells:

Insert Row Before	Insert Column Before	Insert Cell Before
Insert Row After	Insert Column After	Insert Cell After
Delete Row	Delete Column	Delete Cell

Another option available to you is to simply use the adjust icon imbedded within the table itself. First, click on the table to see the adjust icons appear:

Add/Delete Rows
Add/Delete Columns

1. To delete a cell, click the x inside of the adjust icon:

2. To add a new column, select which area of the table you want the column to be inserted next to:

3. Click either arrow on either side:

4. A new column will be added, like so:

5. Notice the line is darkened in between the columns. The cursor is there, you simply need to start typing:

And your words will appear. The same can be done to add a row:

1. Select a cell:

2. Click the add row arrow:

3. A new row will be added, like so:

4. And your cursor is right there:

Adjusting An Individual Cell

1. To adjust an individual cell's property, put the cursor in the cell you would like to adjust:

2. Next, click the cell properties icon:

3. This will bring up the cell properties window. Here, we'll adjust the cell's width to make it 100% and we will center the text within the box:

This will make the cell appear like so:

The look on the site will look like this:

Merging Cells

1. To merge cells, first select the cells you would like merged:

2. Click the merge cells icon:

3. Your cells will then be merged:

You can also simply select a cell, then click the merge cells icon for the following window:

Here, you can merge any number of cells to the left, right, and below the cell you have selected.

To separate the cells after merging, just click the undo button:

Split Cell:

If you'd like, you can split cells once you merge them by clicking this icon.

Cell Padding

Cell padding keeps the text (or image) within a cell from brushing up against the walls of the cell.

Cell padding keeps the text (or image) within a cell from brushing up against the walls of the cell. (cell padding = 10)

Cell Spacing

Cell spacing allows for

space between cells.

Cell spacing allows for

space between cells. (cell spacing = 10)

Changing A Cell's Color

Much like adjusting a page's background color, one can adjust a table's color with the help of a Color Selector.

1. Choose which cell you want to change, and click the cell properties icon:

2. Under the CSS Style Section of the Cell Properties Window, click the box next to "Background", "FG Color" (Foreground Color), or "Border" :

The Color Selector will pop up in a new window. Pick which color you want your background to be:

3. Click "Okay" at the bottom of the Cell Properties Window when you're done

Placing Text Or Images Side By Side

Aside from charts and lists, tables are also great at allowing you to place images and text next to each other. This allows you to use tables as a layout feature, letting you place content within the body of your website with ease. To begin, let's create a simple table, say two columns by one row:

After creating the table, place your cursor in the left hand cell and add an image:

Place a second image in the right hand cell:

Adjust your table to make it look the way you'd like by clicking the table properties icon:

For example, if you wanted to get rid of the borders on your table, go to the "Frame and borders" section of the "Table Properties" tab set the Borders to 0 pixels, the Frames to "No sides", and the rules to "No rules" as shown below:

Your images will now appears side-by-side without any borders:

Table Paths

A table's path can be found at the bottom of the WYSIWYG Editor:

This path allows you to control functions in the table by selecting certain areas of the table, or the entire table itself. Starting from left to right, let's go through the various paths:

body

If you think of the path as a hierarchy, the base of the hierarchy is the body itself. This refers to the "canvas" that the rest of the table is built upon. Let's start with an example:

From here, if we are to select the "body" path:

Everything in the body has now been selected, including the text below the table:

If you were to press delete from here, you would delete the entire table and the sentence underneath it:

And the path would return to only body:

Remember: there will always be a "body" path in the WYSIWYG Editor because the "body" path is the canvas that all the code is placed upon.

table

Clicking the "table" path:

Will highlight the entire table itself:

From here, you can delete the entire table if you so choose.

tbody

The next path, "tbody", refers to the table's body and selects all the contents within the body of the table:

As you can see, the contents of the table are selected, but the table itself is not highlighted. By clicking delete here, you can delete all the contents of the table, but keep the table itself.

tr

The "tr" path refers to the table row and when clicked:

it will select the contents of that table's row:

The cursor was in the "below" box when the "tr" path was selected. Had the cursor been in the "Follow" or in the "the" boxes, the top row would have been selected. Again, by clicking delete now, all text in the bottom boxes would be deleted.

td

By clicking the "td" path, you'll highlight the table data for whatever box the cursor is inside:

By right hovering over the "td" path, you'll see the table data that's been selected in the table properties:

By right-clicking on the "td" path, an information box will appear with the table data:

h3

As you add more style elements to the contents of a table, it will appear in the path below. For example, if were to highlight the word "below" and change the formatting to Heading 3:

It would be reflected in the path:

Remember: the more specific the details of the table contents, the more information will be placed into the path. If we select the "h1" path:

The word "below" will be highlighted: