Why use Tables?

Many web designers will use a table to organize information around a topic with many subtopics. The weekly plans for this class are an example of this use of tables. Tables can also look similar to databases or spreadsheets without the sorting and calculating functions. The table below is a good example of this use. This is a table that served as an example of a database on Marine Phyla.

Animal

Phylum

Locomotion

Feeding

Defense

Reproduction

Unique Characteristics
Nudibranch Mollusc Gastropod Poda Radula, active feeder Nematocysts, coloring Sexual Swallows anemones for their nematocysts, shelless
Sea Star Echinoderm Tube feet Tube feet, oral disk, active feeder, oral disk Spiny skin Sexual, regeneration of parts Regurgitation of stomach to digest food

Tables, however, have a much more creative side. In fact, it's a hidden side that makes web page design much more fascinating. Take a moment to experience a virtual tour of an elementary school in my district, and you'll see what I mean.

The table in that page has six rows and two columns. However, after I added the table, I made the borders invisible unlike the table you see above where the borders are easily seen. This simple idea allows us to place images almost anywhere on a web page. Visit the district office in the Pleasant Ridge School District and notice the table borders are invisible on the outside, but there is a table with visible borders inside a bigger, invisible table. Pretty dang slick, don't you think? So, how is this done? It's very simple.

Open a new or existing page in PageMill. Place the cursor on a fresh line, and center it if you like. Go to Insert => Table in the menu bar or use the icon on the PageMill tool bar. You know the routine by now. It's getting more and more intuitive as we go along. In the window that pops up, select the number of columns and rows you want, and select the border size. Zero means no border.

The table below is a 3 by 3 invisible table. To give you a frame of reference (no pun intended), I inserted a table with a border in the middle cell and placed the "Create Table" window inside it. I made the outer table (the invisible one) 85% of the screen size by clicking on "Pixels" in the "Table Width" drop-down menu, and I selected "Percent" from the choices. Then I entered 85 to indicate that I want this table to be 85% of any screen on which it appears. I also added the link to the top of the page just so you realize that tables can have links in them. Pretty powerful stuff!

The "Tools for Thought" opening page is another example of a table within a table.

 

 This is a table within a table.
 
 

 

 
 
   

 

 

Go on to Lesson 5: Image Maps