Using Tables

Full Page Width
Tables are very useful when you design a web page.  They give you far greater control over the way your web page will display.  Web pages will be viewed on a wide variety of computer monitors, each with different settings. 

One of the main settings is the screen resolution.  This is determined by the number of pixels across and down the screen.  Older 14 inch monitors often had a resolution of 640 pixels by 480 pixels (low).  Newer monitors can be set to 800 x600 pixels, 1024 x 728 pixels, 1280 x 960 (high) pixels or higher.

The more pixels on a screen, the more information you can see.

If you just type on the web page, when the user views the page, the text will default to fill the width of the screen.  If the user is using a large monitor, set at a high resolution, then more text will appear on each line.  Wide lines can be difficult to read.  (Are you finding this text difficult to read?)

List of Items
If you have a list of items (short lines), then the text will be predominantly on the left of the page and this also may not be visually pleasing.  For example, if you were listing the assessment for your course, it may look like the list below.

Assignments  20%
Short Tests 10%
Term Paper  20%
Independent Study 10%
Final Exam   40%

The long lines of text may look better if they were shorter and appeared in the centre of the screen.  Similarly, the appearance of the page may be better if the list of items was moved towards the centre.  (Do not use the centre function for this).  To try to improve the appearance of the page, we can use tables.  This is explained below.

 

Using Tables to Control the Text
For this part of this web page, I have created a one cell table (one row and one column).  You cannot see the border of the table since I set it to 0.  When I created the table, I set the width of the table to 600 pixels and centred it on the page.  You will see this makes width of the lines shorter and hopefully, easier to read.

Of course, how this appears will depend on your monitor resolution.  If you have a monitor set with a width of  640 pixels, you will find the text almost fills the width of the screen and you will see very little difference. 

If you have a monitor with a setting of 800 pixels, then there will be more space along the sides of the screen.  If you are using a monitor with higher resolution settings (1024 or 1280 pixels), you may find there is too much space down the side.

To review, the table properties used in designing this table are:

width - 600 pixels
alignment - centre
border size - 0

As you read the top and bottom sections of this page, I hope you can see my point in using the table to control this part of the page.

You can also use the table to control the placement of text in a list.  You will notice how uneven the % allocation or the property values are in the above lists.  I will show you ways to improve the appearance of these.  (Are you finding this part of the page with the narrower lines is easier to read?).

Using tables to control lists
By creating a table with two columns, you can align text as shown below.  Again, I have made the border size equal to 0.  You will notice the even left alignment for the second column.

width 600 pixels
alignment centre
border size 0

 

Assignments 20%
Short Tests 10%
Term Paper 20%
Independent Study 10%
Final Exam 40%


Table Border and Cell Padding

The structure of the tables is shown below.  To show the structure, I have made the border equal to 1 so you can see it.  It is a personal preference whether you want to show the border.  In the top table, the text is very close to the border.  I think I improved the appearance in the second table by increasing the cell padding to 3.
 

width 600 pixels
alignment centre
border size 0

 

Assignments 20%
Short Tests 10%
Term Paper 20%
Independent Study 10%
Final Exam 40%

 

Placing Existing Content in a Table
If you have completed part or all of your page, and then decide you want to place the contents inside a single cell table, you can still do so.

First, save your page.  If there are problems, you can then re-open it.

Place your insertion point on the first line of text and press the Enter key to create a blank line for the table.  Insert the table and set the size of your table, alignment, etc. 

Select the content of your web page, click Edit > Copy.

Place the insertion point in your table.  Click Edit > Paste and the text should be formatted in your table.  You can now erase the original content.