|
I
always find that understanding the "concepts" behind something essential to
learning how to use it well. Tables and frames had me completely
confused there for awhile. I would look at the code of existing
pages out there and still not be able to figure out how to do one myself.
The tutorials (and Webtech's is excellent and the place I learned to do the
nitty gritty of frames coding) lead me through the steps, but once I left
those specific instructions for those specific tags, I was lost.
I had no idea of how to do it in even a slightly different way.
It fell into place for me when I began thinking about tables and frames in
terms of spreadsheets. All of a sudden, I was able to do simple
tables and frames with ease. I am rambling on about this in hopes
that it might help someone else grasp tables and frames easier.
| ||||||||||||||||||||
|
I finally got the hang of doing spreadsheets by thinking of them in terms of
a grid with the cells being "addresses" combining their location in the
colums and rows of the grid. The columns go up and down -
the rows go across. The cells are all the spaces in the grid
between the columns and the rows. Let us say that the spreadsheet
is a simple one with three columns and three rows. We'll
name the columns A, B, C and the rows 1, 2, 3. That means that
the cell addresses in the first row would be A1 (column A, row 1), B1, and
C1. The cell addresses in the first column would be A1 (first
column, first row), A2 (first column, second row), and A3 (first column third
row). So you can see that the address of the cell in the second
column, third row would be B3.
| ||||||||||||||||||||
| ||||||||||||||||||||
|
This helped me in understanding tables as tables are really made up of
columns and rows too. Just like in spreadsheets, it means that
each column and row will take up as much room as the largest data entry
in it. However, with tables, the grids are not always visible
and certainly not when you are creating them. That made them
harder for me to grasp at first. The only place that "columns"
are mentioned in the table tags in when you first set up the table (TABLE
ALIGN=center COLSPEC="3" CELLPADDING=6 WIDTH=80%) (/TABLE) itself.
You have to remember how many columns are there so that you are sure to make
as many data entries (TD) in each row (TR) as there are columns in the table.
Remembering the spreadsheet grid arrangement helped tremendously.
I no longer made a row with fewer columns in it than the other rows.
To follow our analogy from the spreadsheet model above, you'll see
that we need to add one more column for the table model below in order to get a
three row, three column table.
| ||||||||||||||||||||
| ||||||||||||||||||||
|
Another way of thinking about tables and is to use the analogy of packing
a huge box with lots of smaller boxes in it for shipping. (I did
lots of this at Christmas - sending off presents to the relatives.
:D) The smaller boxes are "nesting" inside the bigger box.
Even though they are nesting, each box has a top and a bottom.
Nesting tables each have a top and a bottom too - the (TABLE ALIGN=center
COLSPEC="3" CELLPADDING=6 WIDTH=80%) (/TABLE) commands. If you choose
to nest a second table within the main table you must place it somewhere within
the table 1 (TABLE) (/TABLE) tags, as in (TABLE1) (TABLE2) (/TABLE2) (/TABLE1).
Please note that these tags will not work as they are.
This is only to give the concept, not the specific instructions. In
order to see nested tables in action, just look at the code for this page.
You'll see that the spreadsheet and table "models" above are both nested within
the larger table that contains this whole written piece.
| ||||||||||||||||||||
|
Frames are a little more difficult to conceptualize I find.
The concept still works in general, but is complicated by the fact that
the instructions are not all contained on the same page.
In frames, you must have a parent html page, and an html page for each
frame referred to in the parent page. So, for a
a web page containing three visual frames, you need four html pages.
The parent page (frames.html) sets up the frames for three slots
on the resulting web page and designates three other pages
(page1.html, page2.html and page3.html) that will show in each of the three
slots. It also determines whether these frames will go across
as rows or up and down as columns. In our example, let us
imagine that it sets them up as columns. To see an example of
this frames format, go here.
| ||||||||||||||||||||
|
Now, if you can picture that, let us imagine a web frames page with two
columns. The parent page will set up two frames (page1.html
and page2.html). However, we want the second frame referenced
in the parent page to contain a two frames also, but situated as rows.
We treat page2.html as another parent page and we set up
frameset in it also which refers to another two pages (page3.html and
page4.html.) Our resulting web page has two frames in two
columns. The second frame is divided into two rows.
It took 5 html pages to accomplish this feat. To see an example
of this nested frames format, go here.
| ||||||||||||||||||||
|
I am not overly fond of frames. They cut up the page, usually
involve scrolling in several places on the page, and eat up page space.
However, they do have one advantage. If you reference
a site other than your own, the viewer does not have to leave your web page!
You keep the viewer right there as the referenced site loads
onto one of the frames on your page. Great control for the web
designer. Viewers, however, might object to not being
able to bookmark the referenced page for themselves.
| ||||||||||||||||||||
|
Tables are just wonderful tools! There is nothing bad I can
think of to say about them. There is nothing like a
table nbsp; (and a clear dot gif :D ) nbsp; for ease and control of
presentation. I readily admit to a preference for tables
with no borders showing, but there are times when you have data arrangements
that make more visual sense with the "grid" showing as in the examples above.
I haven't fully explored all the possibilities yet (haven't found
about "uneven" cell or row sizes), but you can call me a Table Nut, LOL!
| ||||||||||||||||||||
|
It has helped me get a cleaner picture of the concepts involved by writing
this down. I just hope it can help someone else as well.
I'd appreciate your comments and thoughts about this page.
Critiques warmly welcomed.
EMAIL ME
|