WIT 2003

Tables

Tables

Tables are very useful on web pages. They can help organize your text and images in formatted rows and columns. Tables can appear with borders, or without. These borders can be skinny or fat. Tables may have titles, or various colors. The possibilities are endless!!

Inserting a Table on Your Web Page

  1. Place the cursor where you would like your table to appear
  2. Click on the table icon on the toolbar or click on the Insert menu, then Table
  3. The Insert Table dialog box appears:
  4. Enter the amount of rows and columns your table will have
  5. You can alter the width of your table in pixels or percentages. If you leave 100% selected your table will be the width of your web page. Lowering this number will make your table width smaller. See examples of tables with different widths
  6. Enter a number for your border width (in pixels). The bigger the number, the fatter the border will be. If you choose to have no border appear for your table, place a 0 in the field. **Note: Composer will show a red dotted line to indicate the table borders as zero. When viewed in a browser, this red dotted line will not appear
  7. Click OK to have your table created

Tip: You can create a table within a table by placing the cursor inside your existing table and opening the Insert menu and selecting Table


Editing a Table's Properties

  1. Begin by opening the Table Properties dialog box: click on the table, then click on the table icon in the toolbar. You can also open by right clicking on the mouse and clicking on "Table Cell Properties"
  2. The Tables Properties dialog box contains two tabs: table and cell

Click on the Table tab (also shown above):

  • You have read above about changing the rows, columns and borders. You can also align your table to be left, center or right justified by clicking on "Table Alignment".
  • If you desire a caption to your table, pull down the Caption drop down list to select above table, below table or no caption
  • It is possible to give your table a background color. Click on the color field to see a variety of choices, or you can choose to leave the table background transparent by doing nothing to it
  • You can click Apply to preview your changes without the dialog box closing, or click OK to confirm your changes

Click on the Cell tab:

  • Under the "selection" section you can choose to edit the individual cell your cursor is placed in, or an entire row or column from the drop down list. You can also move between cells by selecting "previous" or "next".
  • Change the size of cells height or width in percentages or pixels at this location as well
  • You can align the content of each cell, whether text or image, under "content alignment"
  • For "Cell Style" the normal feature leaves text alone, while selecting "Header" from the drop down list will center and bold the text in the cell
  • Your text will wrap to the next line unless there is a paragraph break if "wrap" is selected You can select "don't wrap" from the drop down list as well
  • Each cell, row or column may contain its own background color if you choose so. If left alone, the table color will appear transparent

Adding and Deleting Rows, Columns and Cells

Adding:
  1. To add a row, column or cell to your table, place the cursor inside the table where you want to add something
  2. Open the table menu and choose Insert
  3. Choose the option for your needs:
Deleting:
  1. To delete a row, column or cell to your table, place the cursor inside the table where you want to delete text
  2. Open the table menu and choose Delete

Merging Cells

To merge (or join) a cell with a cell on its right, click inside the cell to the left, open the table menu and choose Join with Cell to the Right

To merge (or join) adjacent cells, select adjacent cells by dragging over them, open the table menu and choose Join Selected Cells

Finally, to split a merged cell into two or more separate cells, click inside the joined cells, open the table menu and choose Split Cell


Moving, Copying, and Deleting Tables

Moving a Table:
  1. Click inside the table you would like to move
  2. Open the table menu, choose select, and then choose Table
Copying a Table:

Use the Edit menu's copy, cut, and paste features to copy tables

Deleting a Table:

Open the table menu, choose Delete and then choose Table

Examples of Tables

Click here to see examples of tables at various widths and tables with or without borders

Activities

Play, play, play!! The easiest way to become familiar with using tables is to just try out a number of different ones. Try some of the suggestions below or just practice on your own:

  • Create a table with 100% width of the window
  • After creating this table, right click to see table properties, then change the width to 39%
  • Right click in each cell. Choose cell properties and give each cell a different color. Alternatively, highlight a whole row, right click, and make each row in your table a separate color
  • Copy a table within a table
  • Create a table with a border of 8
  • Create a table with a border of 0

Click here to proceed to Publishing

The contents of the Web Institute for Teachers website are Copyright 1999-2003, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of the Web Institute for Teachers.
The current time is December 01, 2008, 10:59 am, CST. This page was last updated at 3:22 pm 2003n June 23, 2003, by cac. It has had 466096 visitors.
Please use the Feedback button to tell us how you like this page.