|
Intro &
Getting Started | Viewing Source &
Tags | Making & Testing a Page
| Basic Text Formatting | Images
Links | Directory
Structure & e-mail | Tables | META
Tags | Outside Resources
Tables:
There's an easy way to organize things on a page, without having
to go through the hassles of line breaks and aligning. Wouldn't
it be easy to just create a table with rows and columns to format
your page? Wouldn't it be nice if you could even make this table
invisible, for that extra-professional look of organization? HTML
makes it easy!
The following example is a very basic table. Take a look at the
tags.
<TABLE>
<TR>
<TD>One</TD>
<TD>Two</TD>
<TD>Three</TD>
</TR>
<TR>
<TD>Four</TD>
<TD>Five</TD>
<TD>Six</TD>
</TR>
<TR>
<TD>Seven</TD>
<TD>Eight</TD>
<TD>Nine</TD>
</TR>
</TABLE>
How exactly is this working? <TABLE> lets the browser know
that, well, the table is about to start. <TR> starts a new
Table Row. <TD> indicates a new column ("table data").
So we've got a table of three rows and three columns. As in the
example, make sure to close out all tags. Some browsers, especially
Netscape, are extremely picky about displaying tables if the HTML
is not coded perfectly. TABLE is a tricky tag. Perhaps this illustration
will help:
So you've got a basic table, and now you want to really start formatting
it. In the initial <TABLE> tag, we can add in a few attributes
to alter how the table looks. Look at the following example:
<TABLE WIDTH="500" BORDER="0" CELLSPACING="2"
CELLPADDING="2">
The WIDTH="500" tells the browser that the absolute size
of the table is five hundred pixels wide; no matter how many columns
you add, the size will never exceed this number. The BORDER="0"
is telling the browser to draw a border of zero pixels; essentially
an invisible table! You can put any number you wish, here; be aware
of just how large you're making the border, though. CELLSPACING="2"
tells the browser to put two pixels of space between cells. This
keeps things from being too close to each other inside the table.
CELLPADDING="2" tells the browsers to put two pixels of
space between individual cell borders and the contents inside the
cell; this also keeps things from being too close to each other,
inside the table (imagine putting your cell content into a padded
cell).
You may want to align the contents of a cell to the left and right.
Similar to images, you can do this, but inside the <TD> tag.
For example:
<TD ALIGN="RIGHT">
... would align the contents of the cell justified right. You can
use LEFT, CENTER, or RIGHT as you wish.
What will you place inside of a table? You can put anything that
you'd normally put on a page inside the cell of a table. Tables
are great for organizing links, image galleries, etc. Experiment
with the size, border, etc. of tables to see what works best for
you.
The <BODY> Tag (and everything inside it)
Wouldn't it be nice if there was a way to set the text color, background
color, etc. of your page all in the same place? The <BODY>
tag allows you to do this. The <BODY> tag comes after the
<HEAD> tag in the beginning of your HTML document.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#800080" ALINK="#FF0000">
What's going on here? "BGCOLOR" is telling the browser
to set the background color of the page whatever is contained in
the quotes. What is "#FFFFFF" though? This is called a
hex code. Colors aren't represented by name, they are represented
by a six-digit number. In this case, "#FFFFFF" is pure
white. The text of the page is set to "#000000" (black).
You can also format the color of links that have not been visited,
links that have already been visited, and links that are being clicked
(LINK, VLINK, and ALINK, respectively). In this case, they are set
to blue, purple, and red (respectively), which are the standard
among most websites.
A hex code is actually divided up into 3 sets of two numbers each
(forming the six-digit number code). Each pair represents a color
of the RGB code (RGB = Red, Green, Blue). The first pair in the
hex code represents the red factor, the second pair equals green,
and the third pair represents the blue factor. For example, a full
shade of red in RGB code would be Red=255, Green=0, Blue=0. However,
in hex code, the color would look like this: #FF0000. The hex code
is the way to interpret RGB colors in HTML.
>> next
|
