Information Resources & Technology (IRT)–

Add and Edit Tables

Note: Images, tables, text and combinations of all 3, should fit within the horizontal space available in each column. Wide images, wide tables, and longcontinuoustextwithnobreaks, can cause the central content to be pushed out into the background area.

Here are the maximum widths for each column size:

Watch Demo

Step 1: Insert a table

  1. Find and Edit a page.
  2. Place your cursor where you want the table to go.
  3. insert table button
    Click the Insert Table button (right).
  4. The resulting dialog box will allow you to set various properties of the table you are inserting. Use these settings:
    • Rows: 3
    • Columns: 3
    • Table width: 500 pixels
    • Border: 1
    • Padding: 5
    • Spacing: 0
    • Header: Top
  5. Click OK to insert the table.
    Note also the square handles for stretching the table's size. Try to avoid changing the table sizes using these handles. Tables sized using handles can create problems later.
  6. Try filling some text into the table. Note how text in the header row differs from text in other cells.
Watch Demo

Step 2: Change general table properties and cell settings

  1. Select the table, then go to the Format menu and find the Table Properties command. The Table tab in the resulting dialog box gives us control of general table properties.
  2. Make the alignment Center, change the Border to 0. Cell padding stays 5, but change Cell spacing to 2. Border color is not used in every browser, and we've set the border to 0 anyway, so skip over it.

table properties, table tab

  1. Click the Background color button. Use the color picker (left) to select a color. You can click any item on your screen to sample it's color. For this exercise, click the first grey chip above the white chip.
  2. Switch to the Row and Column tab. We selected the entire table, so our changes will be applied to all cells. Select individual cells, multiple cells, rows or columns before getting Table Properties to change just the selected cells.
  3. Set Horizontal alignment to Left so all the text is flush left. Keep the vertical alignment on Top. Click the Background color button to get the color picker, and this time click on the white chip. Column width can be Fit to contents. Also, leave Wrap text checked so the text will wrap in the cells. The Header row button is used to set or remove the header setting. It shows as a square here because we've selected both header and non-header rows. Leave it like this. Leave Row height set to Fit to contents. It's generally a bad idea to set the depth of cells that will have content. Click OK to set the changes. edited table

The table is starting to look a little more sophisticated. The HTML border we started with looked clunky. In our improved version, the color of the table, grey, shows through between the cells which are filled with a white background.

Step 3: On Your Own: Split and Combine Cells, add a New Row or Column

  1. split cell dialogSelect a pair of cells, say the bottom left two. Find the Table menu and select Merge cells. See how they are combined into one cell.
  2. Place your cursor in any other cell. Find the Table menu and select Split cell. The Split Cell dialog box (right) lets you choose between breaking the cell into rows or columns. Let's split to two columns.
  3. Place your cursor in any right-most cell. Find the Table menu again, this time selecting the Insert menu item. The submenu provides a number of options you can explore later. Select column to the Right. table properties, cell tab

Note how a new, empty column has been added to your table.

  1. Try the Table > Delete items as well. There are also a pair of buttons at the top right of the window you can use to quickly add rows or columns in the default direction.

By now you should have a pretty good idea how to add, combine, split and delete cells in your table to produce any layout you need.

Step 4: On Your Own: Change Text Style

Click and drag across several cells with text in them. Click on the styles menu, just below the Publish button. Select a style to see how it is applied to the text in the cells. Note that the header items are still bold. You can apply styles to individual cells and ranges of cells. You can also select parts of the text within the cell to have multiple styles.

table, expandedA neat trick

Tables are a major element in the layouts of many Web sites. By combining text, graphics, and colors, many different designs can be achieved. Sometimes a table is complex, or it's elements so small that it's hard to select them. To make it easier to analyze the table, make selections, and make changes, set the Table's Cell Padding to 5 or 10 in the Format > Table Properties > Table tab. When you are done, set the padding back to 0 or whatever it was before.

Step 5: Publish and view in browser

You will need to click Publish, then view your page in your Web browser to see the effects of your experiments.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: