This page: Topic 5 (extended.)
INTRODUCTION to TABLES
(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )
You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!
Note: In all of the following, actual html examples are omitted in order to avoid confusion.
After you can visualize the concepts discussed, you're ready to proceed to the tables construction tutorial.
WHAT CAN TABLES DO FOR ME?
Let's say that you've chosen a group of graphics and created some text for your page, and that you'd like to
arrange them attractively. Your graphic is a link to be repeated twice, you have a page header, and there is
some descriptive text.
Here's the link image:
And the text header: "GREAT LINKS!"'
And the text is: "Here's my selection of great links from all over the Internet. Notice that my text
for this section goes across all three of the spaces above. I can use this technique to place text and/or graphics
at any specific place on my webpages, and be certain that they will always appear in the same relative positions,
regardless of screen width or resolution."
Without a table, the arrangement would look just as you see it above, although you could alter text size and
color.
With a table, we can control relative placements, perhaps as a banner like this:
|
GREAT LINKS! |
|
|
| Here's my selection of great links from all over the Internet. Notice that
my text for this section goes across all three of the spaces above. I can use this technique to place text
and/or graphics at any
specific place on my pages,and be certain that they will always appear in the same relative positions,
regardless of screen width or resolution. |
- Overall, there are two graphics (the chain links) and a text header, all on different colored backgrounds,
and with nice spacing around them.
The text beneath is contained across all three of the upper elements, and could also be arranged to cross any one
or two.
- Although the text is typed without breaks, its overall width is confined to the width of the upper
"banner" through table control.
- There's an attractive complementary background color for both graphics and text.
- The blank white space surrounding the three colored elements (table cells) can be made 0 or any value
you choose.
- Table structure allowed control of the amount of free background space around the graphics and header,
and different spacing for the lower text grouping.
You may use table construction to control the relative placement of any text and any number of graphics
anywhere on your web page! Mix 'em up a bit so it looks like a professional layout job, not just a collection
of stuff flowing downward only.
Note the table border, which in this case is gray. Border color in Netscape may be controlled by
specifying the BGCOLOR for the page in the BODY tag. Also notice that Netscape shades the border around
its perimeter, for a nice 3-D effect.
The creation of bordered images with background colors would have resulted in much larger image size,
and would require that you make a separate image for each different color. With the table, we can use only
one image, assign different bg colors, and create striking simulations of larger graphics with very
little added filesize (and faster downloading.)
Without a table, all of this would change size and move around uncontrollably, so that whatever looked
nice on your screen would look entirely different on someone else's. The use of tables will absolutely ensure
that your presentation looks exactly as you want for it to, regardless of user's monitor type, screen settings, etc.
VISUALIZING TABLES
OK, so how big is a table, and how do I know what can go in it, and what does one look like?
You see tables every day. Any arrangement of vertical columns and hroizontal rows is a table, even if it doesn't
have divider lines. Here's a sample of tabular (in a table) information, without lines and then with:
| Horse |
Eagle |
Cod |
| Cow |
Hawk |
Sole |
| Sheep |
Falcon |
Snapper |
|
| Horse |
Eagle |
Cod |
| Cow |
Hawk |
Sole |
| Sheep |
Falcon |
Snapper |
|
Each little box surrounding a word (above) is a table cell. In table html, a cell is fully termed as a
"data cell", and is opened with the tag <TD> (for "Table Data") and closed with the
tag </TD>.
- OK, so how many columns can I have?
Hundreds, if you wish, but the page will probably be too wide to see without left-right scrolling.
- How many rows?
Unlimited. Just remember that the browser will load an entire table before showing anything in it,
so you're smart to divide very long tables into a series of smaller ones.
- How wide is a column?
As wide as it needs to be to contain what you put in it. The example shows only one word in a cell. However,
a cell may contain many words or sentences, such as the single cell with all the words in it in the opening
example (with the link images) at the top of the article. Notice that in the table immediately above, the
word "Snapper" determines the width of the cell and its entire column. You may artificially control
column width to force long text to stay within a fixed width or height limit.
- What can go in a table cell?
Anything you can put in your html - text or images. One image, multiple images, an entire book -
all could go into one table cell. The table is used as a container to hold its content in fixed relative
position - that is, to keep its many cells in a fixed order. For differing screen widths, a table can shrink
in width to the narrowest size allowed by the actual width of cell contents. Similarly, it can expand in width.
Both width and height may be given unchangeable values if necessary, either for the entire table or for single
table cells. Here's that same example table with a link image inserted in one of the cells:
| Horse |
|
Cod |
| Cow |
Hawk |
Sole |
| Sheep |
Falcon |
Snapper |
|
Look closely, and you'll see that the link image has made the row height taller, but the word
"Falcon" determines minimum column width. Thus a table row is as tall as the height of the
tallest single cell in the row. A table column is as wide as the width of the widest single cell in
that column. Again, you may specify greater height or width as a cell attribute, if desired. |
Next, we need to discuss the fact that table cells (datacells) may be combined either vertically or
horizontally. We'll use the example table just above, but join two cells into one across two columns:
| Horse |
|
| Cow |
Hawk |
Sole |
| Sheep |
Falcon |
Snapper |
|
Or, perhaps vertically
through three rows: |
| Horse |
Eagle |
|
| Cow |
Hawk |
| Sheep |
Falcon |
|
You may combine any rectangular group of cells into one large cell.
TABLES IN PAGES
You may arrange a page in any fashion you choose. The page may have tables interspersed with text and free
(non-anchored) graphics, or may be totally a series of tables. Remember that an entire page could be one big
table - just be careful that it's not so long that it takes too long to download. Long pages may be broken
into a series of tables, or a mixture of table and non-table presentation.
To further imagine table invention, let's just look at a blank section of a page - any page - as one big
table with one big cell. We're imagining here - the outline below is the mental "picture" of the
area of the page to be made into a table.
| Here's a section of a page. |
Mentally, you can divide that section into two parts left and right, with a vertical line:
| This is a page section. |
 Here's the other section. |
Now let's divide it into four parts with an imaginary horizontal line:
Getting the idea? You can subdivide as often as needed to place all of the necessary parts - images and text -
on your page. Just subdivide to suit the smallest block needed, perhaps for a small graphic, then join other
cells to make some of the pieces bigger. This, then, becomes the outline for the table.
For clarity's sake, we'll say it a little differently:
There is no fixed number of rows or columns. There is no fixed column width or row height. You
dream up what you'd like the page to look like, then create a table with whatever number and sizes of rows
& columns are needed. Every table is "custom", and can be made to suit your needs exactly.
For ease of presentation, we've shown divisions by halves - actually, you can divide your page into any
even or odd number of sections.
Here's an example.
First, we'll display the empty table, then fill it in with content and combined cells:
Empty, "Imaginary" Table, 4 rows, 4 columns:
Now we fill it in with goodies. We'll simply combine groups of those link images to make a larger image
in order to build an example of things that can be done to intersperse various graphics with blocks of text.
Note that cell widths and heights are changed as needed to accommodate contents.
Similarly, some cells are joined to make larger cells. It's still 4 rows and 4 columns.
|
Text Entry or Header |
| This is a text entry of any length, but usually would be designed to fill the
available space provided by these combined data cells. |
|
|
| thing 1 |
thing 2 |
TITLE |
Next, we'll get a little fancier, and demonstrate nested tables, that is, tables within tables. Note that the
examples above all have the table divider lines left visible so that you could visualize our train of thought.
Here's that last table with no visible border lines, just as we might have outlined it on a piece of paper:
|
Text Entry or Header |
| This is a text entry of any length, but usually would be designed to fill the
available space provided by these combined data cells. |
|
|
| thing 1 |
thing 2 |
TITLE |
Hmmm - not terrible, but not really what we'd want to display - the arrangement is OK, but some of the elements
need borders around 'em.
Here's the very first table on this page - it's a nested table, with the lines visible as a border only for
the inner, nested table:
|
GREAT LINKS! |
|
|
| Here's my selection of great links from all over the Internet.
Notice that my text for this section goes across all three of the spaces above. I can use this technique
to place text and/or graphics at any specific place on my pages,and be certain that they will always appear
in the same relative positions, regardless of screen width or resolution. |
Here's that same table with all borders made visible so that you can see the major table in
which the whole thing is contained:
|
GREAT LINKS! |
|
|
| Here's my selection of great links from all over the Internet.
Notice that my text for this section goes across all three of the spaces above. I can use this technique
to place text and/or graphics at any specific place on my pages,and be certain that they will always
appear in the same relative positions, regardless of screen width or resolution. |
You can see that the "header" with the links and title, is actually a table inside a single
cell of another table, a technique which provides broad opportunity for effective mixing of presentation formats.
The trick to organizing your table is to simply imagine what individual pieces need to fit together,
and then create a table to suit. It may help to literally draw an outline of what you intend on paper,
then use that as a guide in developing the html table. Just draw the rough image(s) to scale, add blocks
for text, then draw in the dividing lines required to separate them - there's your table!
We've demonstrated that you may use tables to "splash" page content in a nearless endless
variety of combinations, and that tables are the sole means for controlling relative layout regardless
of the visitor's viewing equipment. We hope you're convinced, and that you'll be inspired to learn and
use table construction to make your own outstanding pages!
[ home ]
SEPARATING THE CONTENTS FROM THE CONTAINER
This section is about your head - that is, it's about controlling how you think in approaching the task of
writing html for a web page. Bear with us, and it may help you when the whole thing seems to be a confusing
mess along about midnight and you're red-eyed and bleary with working too hard...
Let's face it - this is a whole new toolbox, and it has a lots of new concepts and methods to remember.
Though it may seem obvious on surface, it's all too easy to get HTML tools confused with their primary purpose
- that of presenting a page on the internet. Beginners and experienced writers alike can become so intensely
focused on writing proper HTML that they forget that the real purpose of the effort is to make a
presentation. What's more important - the method or the content? The content, of course! Here's a subtle
but extremely important point in keeping your head straight when you're knee-deep in alligators:
The only thing that's important is the content. Period.
Simple, eh? You'll eventually find yourself wrestling so intensely with HTML construction that you
lose sight of what you're trying to display, and allow the tools to cloud your thinking about the content.
Think of a web page, including all of the HTML tags,, as nothing more than a container. The important
thing is the contents, not the container. Of course, if the container is faulty, the contents may spoil,
but it's always the container that needs to be modified, not the contents.
Focus on the content...
...then look outward to creating the container, that is, the HTML construction needed to present
the content as you wish for it to be seen. |
So what's the big deal? Well, it's not very hard to keep track of what you're doing with simple tags like
<P>, but when the page becomes complicated with sub-containers, such as <BLOCKQUOTE>s and
especially with complex tables, then the flow of logic isn't quite so easy.
FOCUS OUTWARD
Even though you may be able to easily construct some HTML in your head and type it naturally as you
progress, always discipline yourself to focus on the content. When it gets confusing, enter the content
with no HTML tags, then go back and surround it with the HTML tags that are needed. We'd term this outward
focus - keeping the content as the center from which we focus outward to create the container.
| The remainder of this discussion will address application of
this thinking technique during construction of complex tables. |
BACK TO:
|
TABLES AND OUTWARD FOCUS
Give us a moment to develop a conceptual argument:
It may at first seem a little silly, but as an example, consider giving a dinner party. The very first step
is to decide what serving containers to use, right? Of course not! You can't choose serving pieces until you
know what you're going to serve! You can't arrange those pieces on the table until you know what they are, and
how many there will be.
When you use table HTML, you first must know what's going to be in the tables. Think of the HTML table as a
serving container, and of the page as the dining table. You first must know what's going into the container
before you can devise it, then you must know how many containers there are before you set the table. Point:
Table DATACELL CONTENT is the number 1 concern. After you know that, you can work outward to devise the actual
structure of each table. After the tables are all done, then you can arrange them on a page.
All of those HTML tags are nothing more than a box of precision tools that you may use to construct a custom
container for your presentation. Develop the contents, then apply the tools to make the container.
Here is a moderately complex table taken from the tables tutorial page Example 11, followed by its complete
HTML as needed for this presentation inside a box. You'll see that the HTML is a complicated mess - but please
"keep the faith" and read on afterward!
Now, here's the entire html used to create that display on this page (don't worry about understanding the html -
just see how complex it is, and that there's table inside a table inside a table. Once you understand the tables
tutorial, come back and read this once again.)
This begins at the outside of the "box" above, and ends with closing of the "box.":
BEGIN EXAMPLE:
<BLOCKQUOTE>
<CENTER>
<TABLE BORDER=1 CELLPADDING=8 WIDTH=580>
<TR>
<TD>
(To this point, we've opened the outer table "box" with a single pixel border around the entire
example)
</TD> (Here we end the
table surrounding the entire example above.)
</TR>
</TABLE>
</CENTER>
</BLOCKQUOTE>
END EXAMPLE
WHAT A MESS!! Who could ever carry that whole thing in their heads and just type away at
HTML? There's a table inside a table inside a table, and the second enclosed table has two cells but one has a
second border around it which caused the need for the third table, and I'm so confused...
Whew! Time for a cuppa whatever. Go back and take a look at the original presentation - it's just a box
around some cells with pretty borders. The real secret lies in concentrating on the contents of one data cell.
For instance, let's look at the one cell containing the 
image.
Watch as we develop the table from the inside out.
We just focused on that one image alone - the content of that one single data cell, and then
looked outward by saying to ourselves: "OK, I want this thing centered inside a border, and I want
a text cell right beside it and inside the border. Hmm...guess that means I need a table just for this."
We "stood inside the cell", focused on its content, then looked outward to see what to do next.
For that one cell, we generated the HTML for a table with a border of 3, and added a second cell with text,
or in structure:
<TABLE BORDER=3 CELLSPACING=3>(3rd Table)
<TR>
<TD><IMG SRC="sample.gif"></TD>
<TD WIDTH=150>This is the second data cell in the inner table.</TD>
<TR>
</TABLE>(End 3rd Table)
The next decision was to put that whole table inside another box with yet another text cell to the right.
Hmm...another table enclosing the first one...and, oh yeah...centered on the page:
<CENTER>
<TABLE BORDER=6 CELLSPACING=3 CELLPADDING=12>(Begin 2nd Table)
<TR>
<TD><TABLE BORDER=3 CELLSPACING=3>(Begin 3rd Table)
<TR>
<TD><IMG SRC="sample.gif"></TD>
<TD WIDTH=150>This is the second data cell in the inner table.</TD>
<TR>
</TABLE></TD>(End 3rd
Table)
<TD WIDTH=150>This is the second data cell in the main table.</TD>
</TR>
</TABLE>(End 2nd Table)
</CENTER>
Obviously, we finally decided to surround all of this with one more outer frame, so we built all of the above
into a single cell of a surrounding "parent" table. Notice that we had to go back and do some more
indenting as we added the final table "shell", and then finally enclosed the whole deal in a
<BLOCKQUOTE> tagset to force a page margin:
<BLOCKQUOTE>
<CENTER>
<TABLE BORDER=1 CELLPADDING=8 WIDTH=580>
<TR>
<TD ALIGN=CENTER>
(To this point, we've opened the outer table "box" with a single pixel border around the entire
example)
</TD> (Here we end the
1-cell table surrounding the entire example above.)
</TR>
</TABLE>
</CENTER>
</BLOCKQUOTE>
Hopefully, it's pretty evident that what we called the "third" table was in reality the first
table created as we grew outward from our original focus. Notice that we introduced a few extra blank lines to
help keep things separated. It's a useful technique to help keep organized as your table grows - you can go back
later to remove the empty lines after it's all sensible and working properly.
We started with the single most important thing - the contents of the two data cells - then
worked our way outward as development proceeded. Avoid the trap of preconceiving what the table (or page) HTML
will look like. Rather, start with a mental picture of what the page will look like, define the contents
of the data cells, then add table tags to arrange them as desired.
You could even go so far as to define every cell within <TD></TD> tagsets, and then move them
around until they're in the right order, and then finally build the table to contain them. (Kinda like
planning dinner before you get out the serving pieces.) Every time you "change the rules", for
instance from border to no border, or change background color, etc., you need a new table cell. Figure out
what cells you need and what goes in each one, then attack table arrangement. Content First!!
As expertise improves, you'll find that you can easily imagine an entire simple table and its HTML, and
type it all in order. But - keep the "working outward" concept in mind for those times when it
just doesn't quite make sense. As your tables become increasingly complex, you'll find yourself constantly
and subconsciously working from the inside out as you develop presentation and solve the uh-ohs.
Finally, here's a little table you've seen before. Hmm - let's see - I want some text, and a navigation table,
in one line. The text isn't centered, but the whole line is, and only the nav table is to have a border, and
the nav table is to have an unbordered text comment above it. Obviously, I'm gonna need a table. I think I'll
just take those content details and work outward....
| The remainder of this discussion will address application of
this thinking technique during construction of complex tables. |
BACK TO:
|
