TABLES

HTML tables are useful and easy to implement. They can serve many purposes, from simply helping to get text line-up vertically, to creating web pages that resemble magazines, to creating three-dimensional style buttons that seemingly stand out from a page. Here are some examples.

Say you have a page with a list, and you want the list in the middle of the page. If you simply centered it, it might look something like this:

  • carrots
  • broccoli
  • brussel sprouts
  • lettuce

    • With a long list, things might start looking pretty jagged. A better way is to implement tables.

    To start a table, use the <TABLE> tag (plus a few others). Using code for the example above:

    The <TR> tag means "Table Row", and you need one every time you start a new row inside the table. The <TD> tag stands for "Table Data", and you need one for every cell inside a row. (Our example only has one row and one cell.) If it's getting confusing, put that information aside for now, and we'll return to it later. Just make sure you understand the need for each of the three tags that make a basic table.

    Now look at the results!

  • carrots
  • broccoli
  • brussel sprouts
  • lettuce
    		•

    Like magic, the list has lined up perfectly in the center. This is because it's contained within the table that's centered in the middle of the page. The list items themselves are lined-up along the left edge of the table! If you don't believe me, look at the same table with a shaded border around it.

  • carrots
  • broccoli
  • brussel sprouts
  • lettuce
    		•

    (Notice the cool three-dimensional effect of the shaded border. We'll use this feature later on, when we want to create 3-D buttons.)

    If you're wondering how to create the border, you do it by adding an attribute to the original <TABLE> tag. This attribute is the border attribute, and for our example, it looks exactly like this:

    Now that everything's all lined up, let's get rid of the border and throw some color into our table. This is especially useful for making text show up when it's the same color as the background. Let's say I want the text to be white. This page is also white, so I need to color the table like this:

  • carrots
  • broccoli
  • brussel sprouts
  • lettuce
    		•

    Here's the code:

    The new <BGCOLOR> tag for cell "Background Color" is an attribute of the <TD> tag, because it's the cell that gets colored. The hex color codes are the same as those for font and text body colors (I could have used the word "orange" instead of "#FF7518", but the numbers are more international).

    Let's have fun. I want each item in the list to have it's own color. To do this, I have to put each one in its own cell, and each cell has to be on a new line. The code will look like this (I'll be lazy and use English names for the colors).

    And voila!

  • carrots
    		•
  • broccoli
    		•
  • brussel sprouts
    		•
  • lettuce
    		•

    Notice how the word "lettuce" shows up poorly because white on bright-yellow is almost transparent! I'll leave it to you to figure that one out (HINT: Change the FONT COLOR tag).

    What if you want more than one cell in a row? Try this:

    Notice how there was no <TR> tag between the two cells that will be in the same row. Here's the new result:

  • carrots
    		•
  • parsnips
    		•
  • broccoli
    		•
  • brussel sprouts
    		•
  • lettuce
    		•

    A curious phenomenon you may notice is how the "parsnips" cell is more narrow than the column of cells to its left. The reason is that (as long as there's room on the page, and unless specified otherwise) the table sizes each column to its widest cell.

    A very common use for tables is to create columns, just like newspaper or magazine print. Check out the following code:

    As you see below, the <COLSPAN> cell attribute permits text to flow over into more than one cell. The <ALIGN> tag refers to the cell's alignment, and it can equal right, left, or center. (There's also a tag for Vertical Alignment, called <VALIGN>.)

    First paragraph here
    (It goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on...)     		Second paragraph here
    (It goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on...)     		Third paragraph here
    (It goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on...)

    Here's some text that fills two cells instead of only one

    That's enough on tables for now. As promised, here's how to make one of those nifty, 3-D buttons:

    Notice how the <FORM> tags are both outside the <TABLE> tags. This keeps your button inside the table borders. The <INPUT TYPE="button"> tag creates the form's button, while the onClick tells the web browser to perform the "ThreeDimension" JavaScript. If you're wondering what that is, try it!

    © David Pierre Ostwald, 1997--all rights reserved.