Go to Wesleyan Homepage Go to Navigation Menu Go to Directories Go to Events Calendar Go to Search Wesleyan Go to Portfolio Sign-in
   
Library CatalogsCollections and LibraryLibrary CatalogsServicesLibrary Home
 

FrontPage - Tables

Tables are a powerful design element for creating a visually pleasing and functional Web page (or, if you prefer, a strategically discordant jumble). Tables allow you to control placement of text, images, and other elements on a page. This sample table demonstrates some of the many design features that tables offer:

   a green row

 

 
vertical align bottom  vertical align default (middle)

 

a narrow column of cells

 

vertical align top
 

A cell with an image used as a tiled background.

 

a cell
spanning
3 rows

a split cell (split

into two columns)

a yellow cell

the image above is centered

 
    
     
     

You can even put a table within a table, such as this one, which also has a different style of borders.
 

a cell spanning 2 columns

a wide column of cells

 

  And here is another table, but with hidden borders and cell walls, to demonstrate how tables can be used to arrange placement of elements on a page, such as the gray box to the left and the image to the right. 

 

 

So, how do you do all this neat stuff? Click on the "Insert Table" icon, or look under "Table" on the main menu to draw or insert a table. You can drag to create a table with as many rows and columns as you need. If you miscalculate, you can always add, subtract, or merge rows, columns, and cells (right click in an existing table for a menu of editing options).

Once you have created a table, right click anywhere in the table and select "Table Properties" to bring up the dialog box to the right. Some of the more useful options are:

  • Specify width: You can set the table to be 100% (or 75% or whatever) as wide as the browser window accessing your page, in which case how wide the table appears on a screen depends on how wide the browser window is. This is referred to as relative width. Or, you can specify width "in pixels," which means that the table will always appear the same size on a screen regardless of how wide a browser window is set (so someone may have to scroll left to right to see all of the table). This is referred to as absolute width. If you do not specify width, the table will appear just wide enough to display all the elements.
  • Alignment: If the table is set to something other than 100%, you can center the table or align it on the right or left of the page.
  • Cell padding: The amount of blank space between a cell wall and the elements (text, images) in a cell.
  • Cell spacing: The amount of space between cells.
  • Border size: How wide are the borders outlining the table. Border size = 0 creates a hidden border.
  • Background color: Set the background color for the table. Individual cells can have their own background colors, which override the table's background color.

Right click in a cell or a selected group of cells and select "Cell Properties" to bring up the cell properties dialog box. Some of the more useful options are:

  • Horizontal alignment: Default alignment is left justified; contents can be centered or right justified.
  • Vertical alignment: Default is to have the contents centered; contents can be set to align with the top or bottom of the cell.
  • Specify width: Specify in terms of percent of width of the table for relative width, or in terms of pixels for absolute width.
  • Background Color: Set a background color or image for a cell or a set of cells.

To insert new rows or columns or to split cells into two or more cells, right click in a row, column, or cell and select the appropriate function, or look under "Table" in the main menu and select the appropriate "Insert" function.

To merge cells, click and drag to select all the cells you want to collapse into one cell, then right click in the selected area and click on the "Merge Cells" function.

The best way to learn how to effectively use tables is to experiment with them. Try out lots of different things, and compare the results. Also, look at other Web pages you like and see how tables were used in them.

 

Next: Previewing Your Page


Contents - How a Web Page Works - Getting Started - Page Settings - Text Options
Creating Links - Images - Tables - Preview - Design Tips - Managing Your Web Site