Using Tables to Create Web Placement

> Lectures > Using Tables to Create Web Pages

Using Tables to Create Web Pages
Dr. Linda M. Perry

To control the width and position of the web page, and to control placement of elements on the page, use tables.
Even with Web-authoring software, it's still helpful to know HTML coding for tables so you can make adjustments to a page.
Table code
- Every table <table> must have at least a row <tr> followed by a cell <td>.
  - Closing tags are in opposite order.
  <table width="750" border="0">
  <tr>
  <td>
  Content in the cell, sometimes including another table.
  </td>
  </tr>
  </table>
- Here are the tables (with art dropped out) for the Web page shown in lecture.

Rough Sketch

Before writing code or using software to create a Web page, plan the tables. Sketch out the design you want first. It can be a rough sketch like this one.

For precision in determining the size of graphics, use grid sheets to plan your page.

Use the rough sketch to determine how you'll need to use tables.

A table plan is superimposed over this sketch in the illustration below.

Table 1 is the large table used to set the page dimensions.
- 800 x 600 = 750 x 550

Everything is enclosed in this table.
This one has two rows and two columns, or four cells.

The top row is complete, with cells for the logo and title GIF, so no nested tables are needed.
The second row will need nested tables
- One in cell 3 to place a nav bar table.
- Two in cell 4 for art and text.
- TIP: It's bettter to have rows or columns in the main table to anchor nested tables that are needed all the way across, or down, the page (not shown).
Table 2 has five rows and is inserted at the top <valign="top"> of cell 3, the left cell in the second row of Table 1. Each row of Table 2 will contain a navigation button or text.
Table 3 divides the fourth cell of Table 1 into two sections (rows), one for the art and another for the text.
Table 4 is placed in the second, or bottom, row of Table 3 and has one row and two columns (cells). The text will be positioned inside each column, or cell.

Sketch with Tables

NOTE: A rough sketch and table plan will be required with the Web site justification by the due date announced in the schedule.

Here is the above plan in actual tables (with borders so you can see them).

coding for logo placement here
(a gif)

coding for title art here (a gif)

navbuttongif1

navbuttongif2

navbuttongif3

navbuttongif4

navbuttongif5

email, etc., here

main art (a jpg)

Some text here

Text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here.

Creating tables
- Outside table controls the width of the page:
  - 750 pixels will fit the page into the browser screen on a computer monitor with the 800 x 600 ratio.
  - Most tables are not visible on the Web page.
    - <table width=750 border="0">
    - Border usually takes up 1 pixel even if not visible, more if indicated.
      - Dreamweaver CS3 (and above) has border widths of 0.
  - Every table must have at least the row code <tr> followed by the cell code <td>.
    - Closing tags are in opposite order.
- Nested tables:
  - Use graph paper to estimate number of pixels needed for the width of each table and column (cell).
  - Width can also be set in percentages, when controlling exact width is not imperative.
  - Close off tags in exact opposite order.
  - Check Barebones Guide and Williams book for more on tables.
  - Do the class exercise on tables.
- Basic table and cell attributes
  - Width, height
  - Align (left, right, center)
  - Valign (top, bottom, middle)
  - Borders (visibility, width, colour)
  - Cell spacing, cell padding
  - Background colour, art
Your Table Plan
- Rough sketch in pencil
- Table plan in colour pencils or pens
  - Use different colour for each table
    - Color code the key
- Do NOT staple plan to justification.
  - Instructor will go over your plan, offer feedback and return plan to you in lab.

Here is the code for the above table plan (but without the borders set for visibility). Note that the width but usually not the height is most often specified. Also note that the width is set for the top cell in table 2, and all five cells snap to that width. The height of each of those cells for the navigation buttons (graphics) or text should be set, however. Cell padding of 5 picas was added to Table 4 to create margins for the text. Cell spacing can also be used to control proximity. (The spacing and bolding in the coding below is added only to help you see how the tables are imbedded in the various cells.)

< table width=750><tr><td width="166" valign="top" >
coding for logo placement here (a gif)
</td>

<td>
coding for title art here (a gif)
</td></tr>

<table><tr><td width="166" height="5" >
nav button gif 1 coding here
</td></tr>
<tr><td height="5">
nav button gif 2 coding here
</td></tr>
<tr><td height="5">
nav button gif 3 coding here
</td></tr>
<tr><td height="5">
nav button gif 4 coding here
</td></tr>
<tr><td height="5">
nav button gif 5 coding here
</td> </tr> </table>

email, copyright text, etc., here
</td>

<td>

<table> <tr><td>
main art (a jpg image) coding here
<br>
Some text here
</td></tr>
<tr><td>

<table><tr><td valign="top" cellpadding="5">
Text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here.
</td>
<td valign="top" cellpadding="5">
Text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here, text goes here.
</td></tr></table>

</td></tr></table>

</td> </tr></table>

You can also create tables in Dreamweaver. Here's a tutorial using Dreamweaver (CS3) to add tables to the tutorial on Web graphics.

See alsoCascading Style Sheets.

Projects Index

Back to Lectures Index

Back to Schedule