during lab

new pages | colors | tables | typography | linking | images | navigation | image maps | publishing

Tables

Web designers use tables all of the time to control the look of the content on the page. Tables were used on this page to make sure the alignment of all the information (text and images) stay in place regardless of the web browser used to view the page. Every page you create for your web site must use a table to control the content of the page.

Design Your Table

Before inserting a table, it is a great idea to plan out your web page on a piece of paper and decide what table structure is necessary to keep the web page in place. Here are two of the most common table structures:

The first table has 3 rows and 2 columns to start while the second table has 4 rows and 1 column to start. You can make your tables as complex or as simple as you need them to be, but it is so important you plan your page first so you know what kind of table is necessary to keep everything in place.

Inserting A Table

1 - Place your insertion point exactly where you want to insert your table

2 - Click on insert...table

3 - Fill in the table size options required to create your table (see example image below)

4 - Click OK

Modifying A Table

Once your table is created, it is common for the table to need modifications. Your lab instructor will show you how to insert and delete rows and columns, merge and split cells of a table, set cell properties of a table, change the default alignments of cells, change the alignment of the table, change the background color of a table, and much more.

Fill Your Table

Once your table is modified to properly control your web page, you will need to fill the table cells with text, images, and links.

Saving Time With Tables

There is a good chance that many of your web pages will use the same table structure. While your index page may look drastically different from the rest of your web pages, it is common for the inner pages of a web site to look the same. This gives the visitor of your site a calming feeling because he/she knows where to expect the content to be, the navigation bar to be, and will be able to quickly scan your site to find what he/she needs.

So what about the saving time part? Well, once you have your table structure set up, it is a great idea to save the page BEFORE you type in content and insert pictures. Save the file as template.html or start.html and begin each page from that file, saving the file with its proper file name once the page is created. This idea will save a beginning web designer hours of time because of how tedious setting up your tables can be.

Your lab instructor will demonstrate this time saving idea in class next week during lab 5.