Tables - Keeping Order on Your Web Page
On web pages that have text only, changing the size of your viewing
screen causes the text to readjust to the available width. This is ok
if all you ever want to put on a web site is text. But because you're
going to be building an interesting web site, you will want more control
over the appearance. This is where tables are essential. Of course,
you can still use tables in a more classical way - using them to display an
array of data. But web designers are using tables for much more than
that!
Below is the appearance of the main page of CroakCity.com. At first
glance, it appears to have a table only on the left side. That is
actually a table within a table.
In the following image, all of the tables have been set to have their
borders visible. At least two more tables can now be seen.
One large table occupies most of the main page. It contains the cell with
the frog image, the cell with the title, and the cell in the middle of the page
that includes the purple line and following text. At the bottom of the page is another table with the credit
card images and the search form.
 |
These tables are all used to keep order on the viewed page. The
'links' table in the upper left is set with a fixed width so that no matter
how the page is viewed on the web, the links always look the same. The
large table in the upper right is set with a variable width so that the text
in the middle will 'wrap' if the page gets too small in a browser. The
lower table is centered with a fixed width. This is done to keep the
image spacing from changing no matter how wide the page becomes when viewed.
OK, Now Make Some Tables
See this example page.
It has 4 example tables. Your assignment for L3-2 is to make a
similar page of 10 examples, save it to your web as practice3-2.htm,
and publish it to your web site. Make each of your examples different,
being sure to include changes in table size (use both %width and pixels),
padding, cell spacing, cell colors, justification (both in cell and on the
page), borders off/on, and border styles (solid, dashed, etc.). After
publishing, post a notice in the Discussion Board (L3-2) and include a link
to your table practice web page.
Similar to the example, write inside each table the features you are
demonstrating. If you are really adventurous, try making a table
within a table (or several!). If you know how, insert a few images in
your examples.
|
