| Home
> Projects
> Website Project > Planning Tables
Planning Tables
Dr. Linda M. Perry
|
|
Before you start 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. |
| In this plan, Table
1 is the large table used to set the page dimensions.
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 placing the logo and the title GIF. The second row
will need nested tables to place the navigation bar, art and
text.
Table 2 has five rows
and is positioned at the top of the third cell (second row)
inside Table 1. Each row will contain a nav button, text or
graphic.
Table 3 divides the fourth
cell of Table 1 into two sections, one for art; another for
text.
Table 4 has one row and
two columns (cells). Text will be positioned inside each column.
|
|
NOTE: A rough sketch and table plan will be required with the
Web site justification by the due date announced in the syllabus.
Here is the above plan in actual tables (with borders to you can
see them).
|
coding for logo placement here
(a gif)
|
coding for title art here (a gif) |
|
nav button gif 1
|
|
nav button gif 2
|
|
nav button gif 3
|
|
nav button gif 4
|
|
nav button gif 5
|
email, copyright text, etc., here |
|
main art (a jpg image)
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. |
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. |
|
|
And here is the code for the above table plan (but without the borders
and width adjusted to full Web page). Note that you set the width
for the top cell in table 2, and all five cells snap to that width.
The height of each of those cells must be set, however. 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>
coding for logo placement here (a gif)
</td>
<td>
coding for title art here (a gif)
</td></tr>
<tr><td valign=top width=166>
<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 or gif) coding here
<br>
Some text here
</td></tr>
<tr><td>
<table><tr><td valign=top>
<p>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.</p>
</td>
<td valign=top>
<p>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.</p>
</td></tr></table>
</td></tr></table>
</td> </tr></table>
See Planning Websites with CSS
Back
to top |
