=========================================================================== Today on The World Vol. 4 #158 Wednesday, June 17, 1998 =========================================================================== Continuing the HTML lessons... Tables are one of the most useful thing to know in HTML. You can survive without them (tables can be a pain to work with sometimes) but tables are usually the only way you can get things to line up with other things. (The W3C would like to eliminate them and make us all use style sheets instead, but style sheets are so poorly implemented in most Web browsers that this isn't going to happen any time soon.) (kibo) --------------------------------------------------------------------------- HTML TUTORIAL -- CHAPTER 9 -- INTRODUCTION TO TABLES 9.1 Table basics Let's start over with a "skeleton" page again. Name the new file table.html: Table Example And now we'll add three columns of numbers to the blank page. Paste this into the middle:

Look at my numbers!

    100.00     90.00     87.75
     20.25   -133.80      0.0
...now save table.html, view with your browser and it and you should get a dark gray page with some yellow numbers on it. (Remember that some of the earliest browsers won't change colors.) What we've done here is not an HTML table; it's just some numbers in columns. To line up the numbers, I had to put spaces and carriage returns around them, and then use 
...
to force the browser to leave my hand-formatting alone. There's an easier way. HTML supports a ...
structure which not only automates this sort of stuff, but allows you to make it look pretty. Try adding this after the :

Look at my table!

100.00 90.00 87.75
20.25 -133.80 0.00
Save table.html and preview it again. It doesn't look better than the 
 version yet, does it?  (At least it's in the browser's "text" font
instead of the "typewriter" font, but the numbers don't line up!)
In Part 1, I mentioned that you could have clusters of tags on one line
or spread out over multiple lines.  This is the same table with the tags
bunched together:


    
Look at my table!
100.00
    90.0087.75
20.25-133.80
    0.00



And here it is again with them spread out and indented:

    

        Look at my table!
    

    

        

            
                100.00
            
            
                90.00
            
            
                87.75
            
        

        

            
                20.25
            
            
                -133.80
            
            
                0.00
            
        

    


If you try adding those two versions to table.html, hopefully they will still
look the same in your browser.  (If the tables were filled with images,
Netscape Navigator might actually display them differently, but that's not
something to worry about here.)  Notice how the indented version makes it easy
to see the pairs of ... tags; the closing tag is directly below the
corresponding opening tag, and everything contained between them is to the right.
It shows that I've made this hierarchy:


    1.)  The table is ...
.

    2.)  Within the table, each row is ....

    3.)  Within each row, each cell is ....

    4.)  ... are like 
...
, containing text, pictures, and links.


Basically, we're defining a table by breaking the table down into rows, and
then breaking the rows down into cells.  (This means you have to type in the
values from left to right--not top to bottom.)  The simplest table of all
would be (try this code):


    
Hello, World!



Why would you want a one-cell table?  Well, you can do some graphical tricks
with tables.  When I talk about coloring tables in you'll see why one-cell
tables can be useful.



9.2  Table options


Let's change that one-cell table to:


    
Hello, World!



I hope you remember that we used BORDER= to make frames around inline pictures.
We can do the same with tables.  BORDER="0" is no border (generally the default)
and BORDER="1" means 1 pixel thick.  Let's try something garish:


    
Hello, World!



Some browsers make a fancy transparent picture-frame around the table when you
specify a table border, and others just draw a rectangle.  What if you don't
want the border to hug the text so closely?  There's a CELLPADDING= option which
leaves extra room inside the cells:


    
Hello, World!



Now I'm going to add a second cell.


    

    
Hello, World!Blah, blah!

    



Check how that looks, and then let's change CELLPADDING="10" to something
different, namely CELLSPACING="10":


    

    
Hello, World!Blah, blah!

    



What does this look like?  It should be no longer "padding" the insides of
the cells, but should be spreading them apart by putting spacing between
the cells.  (This may look like a thick BORDER=, but it also goes between
the cells.)  We could do both:


    

    
Hello, World!Blah, blah!

    



That's all well and good, but how will it help us line up our numbers?
Let's start by using CELLPADDING to spread them out a little.


    
Look at my table!

    

    

        100.00
        90.00
        87.75
    

    

        20.25
        -133.80
        0.00
    

    



You may recall that to center a paragraph, header, or inline image, there
was an ALIGN= option.  Do you suppose we can use it to make the numbers
line up, and if so, where would it go?  Not in , as we might want
to align different cells differently.  It would have to be inside  to right-align an entire row
instead of typing it for each cell.)  Recent versions of the HTML standard
say we could also do ... rows,
each of which contains one or more  or  cells, which
contain text.)  You may use  and  inside cells, and you can put a picture
inside a cell with :


    
:


    
Look at my table!

    

    

        100.00
        90.00
        87.75
    

    

        20.25
        -133.80
        0.00
    

    



Those numbers better line up now, providing you're using a font where all
the digits are the same width, as they are in most computer fonts.
(I could also have used 
 to line up decimal points,
but this doesn't work in most of the browsers I've tried (it's fairly new.)



9.3  Table layout: spans & vertical alignment


You should note that  is, in essence, a kind of paragraph, and as
such 
 does not go inside 
...
 and does not contain 
...
.
(Same for 
...
, 
...
.)  So how do you make a heading or
other emphasis inside a table?  ) there's also a VALIGN= setting
that controls vertical alignment:


    
 makes a cell of regular text (with
your choice of alignment) and  makes a heading (which usually looks
bolder):


    
Look at my table!

    

    

      my favorite celltop right
    

    

      middle leftmiddle right
    

    

      straddling the bottom
    

    



View that and see what it looks like.  The top left cell should look
like a heading.  You could use this as a row or column heading, or just
for emphasis.  I snuck another new concept in there: 		.
What does it look like it did?  Try changing the table to BORDER="1"
and looking at it again and it should be obvious.

COLSPAN allows you to make a cell wider (by making it count as two
or more cells spanning a horizontal area) and ROWSPAN lets you make
cells taller.  Here's a new example:


    
Look at my table!

    

    

      XTHIS IS WIDE
    

    

      THIS
IS
TALL		123
    

    

      456
    

    

      789
    

    



That's a little hard to understand in the source code above, but it makes
sense if you think about it a while.  The table has four rows and four columns.
The first row ("X" and "THIS IS WIDE") has two cells, because one of them is
triple-width.  The second row ("THIS IS TALL", "1", "2", "3") has four cells,
the first one hanging down (triple-height, it extends into the next two rows.)
Why do the third and fourth rows only have three cells each?  Row 2's very tall
cell is already hanging down into Row 3 and Row 4, so we've already defined
the first column in each.  Confused?  Try changing that table to BORDER="1"
and it should become clearer!

In your browser, the cell that says "THIS IS TALL" has the text centered left
to right (because of ALIGN="CENTER".)  And it's probably also centered top to
bottom, because that's the default behavior in most browsers.  For 
 and 

and so on, ALIGN= specifies horizontal alignment (left, right, center).
But for  (and its sisters  and 

    

      VERTICAL ALIGNMENT IN TABLES
    

    

      1
BLAH
BLAH
BLAH		
      2
BLAH
BLAH		
      3
BLAH
BLAH
BLAH
BLAH		
      4
BLAH
BLAH		
      5
BLAH
BLAH		
    

    



The first three cells are top-aligned.  The fourth should be centered (both
vertically and horizontally) and the fifth should be settling to the bottom.
Note that it's ALIGN="CENTER" for horizontal centering (for paragraphs, headers,
and table cells), VALIGN="MIDDLE" for vertical centering (in table cells only),
but images use  to mean something like VALIGN="MIDDLE".
This is what happens when your HTML standard is accreted by a committee while
Netscape is also making up new tags.

So between COLSPAN, ROWSPAN, ALIGN, and VALIGN, you have a lot of control
over where a cell goes in a table.  If you hide the border, you can use a
big table to lay out your page, making multiple columns of text, etc.
And here's a neat trick:


    

    

      TRY RESIZING THIS WINDOW A FEW TIMES!
    

    

      ONE
      TWO
      THREE
      FOUR
    

    



WIDTH="100%", just like in 
, specifies "make this 100%
the width of the window", a size which is determined by the person
looking at your page. Thus you can make your table go all the way across
someone's screen and then divide it up into chunks if you want a
columnar layout.  (You can also make cells a specific percentage of the
width of the table, or specify sizes in pixels, which I'll talk about
in detail in a future installment.)

Again, don't mix 
, 
, or 
 in with your tables.  A  should
not be inside 
...
 or similar structure, and 
...

should contain only table stuff (which means one or more 
......



...and of course you could put a link in the cell too.  Try making that
picture a link to one of your other practice pages.



Next time I'll talk more about tables, including how to color them in
and do other fancy formatting tricks.

(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.
[] Find the big white "K" in Coolidge Corner and you've found my window!
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
   Its contents may freely be redistributed as long as credit is given.


    

      Look at me!
I'm Potsie!		
      
      Potsie!
Potsie!
Potsie!