USING TABLES: THE BASICS

Tables are probably the most complicated element in the editing interface of the site, in part because of a couple bugs that we are looking to address. However, they are also very useful for things like directories, listings, or any situation where you want the content to be in several columns rather than just one text block running across the whole page.

Let’s create a Lab Staff page and insert a listing of lab members by using a table. We already have a Lab Staff section, so add the page in that folder, and set the page as the default view for the folder.

Now, let’s add the table:

• Go into the Edit mode for the page, and in the Body Text area, move your cursor to where you want the table, and click on the Table button in the green bar.
• This pops up a box with three fields: Table Class, Rows, and Columns. Table Class is the type of table you want. You can experiment with this and see which style fits your needs the best. The 6 types are displayed below. Certain specifications, such as the amount of space between columns and rows, the thickness of the dividing lines, or the color of the background, cannot be changed. They’re locked into the template to ensure that all content on the site has a somewhat consistent appearance.
  
  

• For now, let’s go with the Plain table class. Also, type in the number of rows and columns you want. You can add or delete rows and columns later. Under the fields, there is a checkbox that says “Create Headings”. If you check this, then a header row will be created for the table automatically. Let’s create a table with 3 columns, 3 rows, and headings.
• When you’re done, click “add table”. You’ll see that a table with the specified number of columns and rows has been inserted. However, it’s very small. This is because the table automatically shrinks to the minimum size needed to hold the content. If you click on the table, you’ll see anchor points that you can drag to enlarge the table.

NOTE: It doesn’t matter what the size of the columns or rows look like in the Edit view. This isn’t an accurate reflection of the actual size of the table. As you input content into the table cells, you’ll notice that the table automatically adjusts to keep the column widths at a good proportion. This does limit some of what you can do, but generally the system does a pretty good job of calculating the column widths. At any time you want to see what the table actually looks like, click “save” at the bottom of the edit page and go to the page view.

• Type in some content. You’ll notice that the table’s default text style is Other:td. You can switch the text style to something else if you’d like, but beware that you can’t change it back to Other:td. You can also use other text-formatting features, such as bold, italics, lists, etc., and those are reversible.

• When you’re done filling in the table, click “save” at the bottom of the page.

• Notice that the three columns are very close together. Some of the table styles have more padding built in so that the text in the columns are farther apart, but not in Plain. To fix this, we can insert blank columns to act as “buffers”.
• Go back into edit mode and place your cursor in one of the cells in the first column. You will notice two symbols that includes a small left arrow, small right arrow, and a circle with an “X”. One of these symbols appear at the top of the cell, the other along the left edge of the cell. You can use these symbols to add or delete rows and columns. The horizontal symbol controls columns, while the vertical one controls rows. Clicking the circle with the “X” will delete a column/row, while clicking one of the arrows will add a column or row.
  
• Click the right arrow in the column controls, and you’ll see a small column added to the right of the first column. Right now, there is nothing in this column, so it’ll be very narrow. Click your cursor in the column you just added and type in five spaces. This will widen the column, and therefore the white space between columns that have text.
• Click on the middle column and repeat the steps to add another blank column.
  
• Click “save” to view your changes. You’ll notice that there are now more white space separating the columns.
  
  

NEXT: Using Tables: Adjusting Tables
BACK: Images: Updating an Existing Image