tag itself, and no BACKGROUND in the | and | cells, so that
the big photo is used as a background across all the cells.
So if you want to display a photo with some text in front of it,
putting the image in a table's or a cell's BACKGROUND attribute
will do the trick.
10.2 Table sizes
Earlier I mentioned you could say to make the table
the full width of the screen. You can specify table widths as a percentage
of the available space (usually the width of the browser window, or
if the table is inside a frame or another table, the width of the
frame or table) or as a number of pixels. For instance, if you wanted
your page to always be 500 pixels wide (assuming 72 pixels per inch,
that's about seven inches) you could say:
| This is a test of the Emergency Broadcast System. This is only
a test. Had this been an actual emergency, you would have been
instructed where to turn for instructions. Once again, this is only
a test. Do not panic. There is no cause for alarm. I am from the
government and I am here to help. |
Notice what happens when you change the width of your browser window.
The table has been specified to be exactly 500 pixels wide. What if
your browser is wider than that? The table stays 500 pixels wide.
What if your window is smaller than that, or if you have a small
screen? It goes off the right side.
Tables with no widths specified stretch or shrink as needed to fit
both the content and the window size. You can mix stretch cells
with fixed-size cells by specifying widths of the 's themselves.
Can you predict what this will do as the window is resized
before you actually test it?
|
This is a test of the Emergency Broadcast System. This is only
a test. Had this been an actual emergency, you would have been
instructed where to turn for instructions. Once again, this is only
a test. Do not panic. There is no cause for alarm. I am from the
government and I am here to help. |
|
The table is specified as WIDTH="100%", or the size of the window.
The empty cells at the left and right (with a dark red BGCOLOR)
have a fixed size, WIDTH="36", to make a half-inch margin (which I
have colored in so you can see what's happening.) The middle
cell has no width specified, so it gets what's left over (100%
the width of the window minus two 36-pixel margins.) The result
is a fairly specific layout which is still flexible enough to
adapt to different window sizes. Convenient, eh?
People frequently put a large table (often with no border and no
background color so you won't see it) around their entire page so
that they can make the text column a specific width, or give it
left and right margins, or run a "navigation bar" down one side
of the page. There are a million different approaches to laying
out a page with tables. If you do this, be sure to keep making
your browser window wider and narrower to see how your tables reacts
to size changes (and different browsers stretch or shrink things
differently) and keep in mind that a lot of tags have unpredictable
results inside tables -- remember how I said that because tables
(and cells) are text containers, you shouldn't put or
(also text containers) inside tables? Usually things look fine if
you do this, but you may get weird spacing (or worse, a scrambled
page) in some browsers. Similarly, never works correctly
for me inside table cells.
(Frames are the other popular way to divide a page up into columns
or other sections, but they're trickier to work with and some Web
surfers get confused by pages that use frames.)
Anyway, let's try some more table stunts. Suppose I had put a
37-pixel-wide ![]() into one of those cells.
What would happen? The browser would make the cell bigger. Cells
get bigger when they need to, or smaller when they need to.
This goes for the HEIGHT attribute as well. (Usually you won't
use HEIGHT because table cell heights are unpredictable enough
anyway as you have no idea how many lines of text there will
be in the cell in anyone's browser, because of different fonts
on different computers.) But specifying a lot of stretchy/shrinky
cells based on the width/height of the browser window leads to
some neat tricks:
Think about that before you run it. How does it work? Run it.
Does it work? In some browsers it doesn't come out just right --
the bottommost asterisks go off the bottom of the page -- but you
can see what's going on. We specified the table to use the full
width and height of the window, and then we made nine cells,
with small ones in the corners containing asterisks, and a huge
one in the middle with "Hi, Mom!" Remember that in
a percentage is the percentage of the available space (the size
of the window or the frame or the table that contains this table)
while in it's also the percentage of the available space.
In other words, you could change to 50% width and height
of the browser window (try it) but you don't need to reduce the
other numbers to add up to 50% -- the size of the cells adds up
to 100% OF THE TABLE'S SIZE, and the table can be any size you
make it.
Confused yet? Let's try a similar but different example (watch out
for some very long lines when you cut and paste this):
|
Now is the time for all good men to come to the aid of
their party. The quick brown fox jumps over the lazy
dog. Nancy, hand the man the dandy candy. Slippery
sleds slide smoothly down the sluiceway. Bite the wax
tadpole. So much HTML it is all over your screen!
|
One
|
Two
|
Three
|
Four
|
Congratulations! You've just made (well, pasted in) your first navigation
bar. Remember how I said that ROWSPAN would let you make a cell which
hangs down into the next row or rows? That's why the first
contains two cells and the others contain only one cell, because
the top left cell is the first cell of all four rows. How would you
change this table so that the four links were spread out across the
entire height of the screen?
10.3 Table wrap-up
If you get confused by tables, a trick I like to use to troubleshoot them --
because I always use BORDER="0" -- is to temporarily change it to BORDER="1"
while I'm debugging my HTML. That way I can see where the cells are trying
to go... If you can't see what's going on in the above examples, try that.
Or if you see someone else's page with a nice layout, try saving the source
code (.html file) and similarly enable borders.
Some pages even use tables within tables for very fancy alignment.
I won't go into that here, it'll just confuse you even more.
TABLE TAGS
Make a table. Should contain only 's.
... A row. Should contain only 's and | 's.
| ... | A cell. Should contain the same sorts of stuff
you would put in
... | A heading cell, a bolder version of .
(options for only)
CELLSPACING="x" Space between cells.
CELLPADDING="x" Margin within cells.
BORDER="x" Size of border. ("0" for no border.)
(options that can go in , , or a cell, depending on
how many cells they apply to)
WIDTH="x%" Specify width or height as
HEIGHT="x%" a percentage of the available space.
WIDTH="x" Specify width or height as
HEIGHT="x" a fixed number of pixels.
BACKGROUND="url" Background picture.
BGCOLOR="#RRGGBB" Background color (solid).
ALIGN="left/center/right" (For cells) Alignment of the contents
VALIGN="top/middle/bottom" of the cell within the cell.
ALIGN="left/center/right" (For ) Move the whole table.
Doesn't work in all browsers, and may
have exotic results (like ![]() ,
it may "wrap" text around the table.)
There are lots of other table-related tags and options but these are
the most useful and most likely to work in different browsers.
10.4 Aside about spaces
I assume you noticed that there were some long lines, such as
[fragment of above example]
Three
in the above examples. Why didn't I put those tags on separate lines?
First let's look at a different example:
Welcome to your life.
Why is there a space before , but not after , and no spaces
around ? Because we want a space between "to" and "your" that's
not part of the link (so that it won't be underlined), but we don't
want a space between "life" and ".". In other words, the and
are hugging the link so that there won't be any extra spaces
within the ends of the link, but there's a space outside to
make a regular space. There are no spaces between "life" and "."
(just a tag) so the link and the period are kept together.
Remember that HTML considers any space or bunch of spaces to be a
single space. A line-break in text is considered a space, too.
In the first chapter, there was an example:
This is
a test
of the
Emergency Broadcast System, this is
only a
test.
If this were
an actual
emergency,
we wouldn't
use the Web
to tell
you
about it.
So what would happen if we wrote this?
Welcome to
your life
.
Most Web browsers consider those line breaks to be spaces, so it
would equate to
Welcome to your life .
...or something similar, with an underscore hanging out one or
both ends of your link. Sloppy-looking.
So there are cases where you may not want to format your
code neatly and readably with tags on separate lines and indented
blocks. Sometimes you have to pack things together to ensure
that they come out packed together. For ..., this is
especially important so that there are no "_" dangling from the
end of your links.
A minor visual defect, but neatness counts.
Next week, I'll talk about the really technical stuff -- like what
all those items in the "document skeleton" actually do (at long last!)
and maybe sometime soon, the joy of frames.
(kibo)
==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
call 617-739-0202.
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
announcements' to majordomo@world.std.com.
Subscriptions to this mailing list are open to World customers only.
[] The hole in Rambo's head keeps getting bigger...
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
Its contents may freely be redistributed as long as credit is given.
| | | | |