HTML
Tutorial - Chapter 6: Tables
Tables are the most important
tool you'll use to organize your website. They'll let you create
navigation menus, divide sections off, and space things out.
Almost every website uses tables to some degree, and many use
them very prolifically.
Because this isn't a tutorial
on design, we're going to focus more on the code of how to
make tables rather than on why we make tables. You can figure
out 'why' on your own through "messing around."
So far, tables will be the first
object we'll learn that require more than one tag to set up.
And it makes sense, tables have rows and columns. It'd be insanely
difficult to announce them all in one tag.
First, we have the <table> and </table> tags.
This lets us begin and end our table in our code.
On their own though, these two
tags aren't very useful. We need to tell our browser how many
rows and columns our table will have before we can do anything
with it. Here's some sample code that creates a table with
two rows and three columns.
<table>
<tr><td>Cell
#1</td><td>Cell
#2</td><td>Cell
#3</td></tr>
<tr><td>Cell #4</td><td>Cell
#5</td><td>Cell
#6</td></tr>
</table>
Yeah, as you can see above, coding
tables by hand requires a lot of energy. Let me explain the
code above step-by-step so you get through it.
First, immediately after we declare
the <table> tag,
we declare a tag named <tr>.
This stands for "table row" we're telling the table
to begin its first row. Everything between the first <tr> and </tr> will
appear in the first table's row. Always declare
rows before anything else in a table. In the chain of command,
they're above anything else. (If you really think about it,
it makes sense.)
So read the first line above,
it begins and ends with the "table row" tag, meaning
everything in between these two tags appears in the first row
of our table. The second line has another set of <tr> tags,
which means everything between will appear in the second row.
Finally, our table is closed and that's that. We now know the
code above creates a table with two rows.
Now, let's explore what's actually
in our table's two rows...
To do this, we see another, mysterious
tag called <td>.
The <td> tag
stands for "table data" - you can think of it as
either a column in the row or a cell in the row. You must insert
at least one cell in each row or your table won't make sense.
Between each <td> and </td> you
simply type what you want that cell to display in it. This
can be text, an image, anything really.
As you can see, in the first
and second rows of our table, we have three sets of "table
data" tags. This means we have three cells per row, which
makes our table, overall, has three columns and two rows. (As
we stated earlier.) The code above will output the following...
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
As you can see above, the
spacing is quite crunched. This is because we didn't assign
our table a width. Thus, the table will be created with only
as much space necessary to output all the text within it.
(Which is ugly!) In the next section you'll learn how to
fix this. But first...
It's your turn. Create a few
tables with varying numbers of rows and columns and values
within them. Don't stop until you get it right!
Like practically every other tag,
the <table> tag
has no shortage of properties we can invoke to change spacing,
shading, etc. Let's go through the important ones...
First, we have width,
which lets us change how wide our table is. Now, we can specify width in
two ways - as pixels or as percentages. If a width is
specified as pixels, its size will be locked in stone, written
in blood. However, if width is
specified in percentage terms, its size will change as the
browser is resized. Let's look at the difference...
Exhibit A: Defined in pixel terms
-
<table
width="350">
Exhibit B: Defined in percentage
terms -
<table
width="50%">
Understanding the width of a table
in percentage terms is quite easy. For example, above we gave
the table a width of 50%. To see how long this is, simply look
at your screen and estimate 50% of it. Done.
Understanding the width of a table
in pixel terms is also easy, but a bit more subtle. The size
of each pixel is about the size of a period: "." To
understand how many pixels across an object will be, first
find out what your screen resolution is. Most screens are either
1024 by 768 pixels or 800 by 600 pixels. That is, 1024 or 800
pixels wide. It's important to design your site to look nice
in different resolutions, so never define a table that will
look too big in smaller browsers.
The next property we're going
to take a look at is the border value.
Tables, like images, can have borders set. By default, tables
don't have any borders. Let's now create the same table we
made earlier except making it a little wider and with a border.
<table
width="350" border="2">
<tr><td>Cell #1</td><td>Cell
#2</td><td>Cell #3</td></tr>
<tr><td>Cell #4</td><td>Cell
#5</td><td>Cell #6</td></tr>
</table>
Let's look at our table now...
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
Quite a difference, huh?
We can also change the table's
border color with the simple bordercolor property.
Just remember how colors are declared.
<table
width="350" border="2" bordercolor="blue">
<tr><td>Cell #1</td><td>Cell
#2</td><td>Cell #3</td></tr>
<tr><td>Cell #4</td><td>Cell
#5</td><td>Cell #6</td></tr>
</table>
And...voila!
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
Now, from a design standpoint,
it might be a good idea to get rid of all the criss-crossing
lines within our table. To do this, we first have to understand
what's going on.
When we give our table a border,
it automatically gives each cell its own mini-border as well
(even if there's only one cell!). If you look
above, you'll see that very clearly. First, our main table
has a thin blue border around it. Second, each of our six cells
has its own mini border around it. To get rid of these mini
borders, we have two options...
We can either tell the table to
give each row a bordercolor of
white (the mini borders will still exist, they'll just be invisible
to our users on a white background), or we can give each cell
individually a bordercolor of
white. Since typing bordercolor="white" six
times is a pain, let's save us some time...
<table
width="350" border="2" bordercolor="blue">
<tr bordercolor="white"><td>Cell
#1</td><td>Cell #2</td><td>Cell
#3</td></tr>
<tr bordercolor="white"><td>Cell #4</td><td>Cell
#5</td><td>Cell #6</td></tr>
</table>
The code above would output a
table that we could definitely brag about to our best friends.
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
Give it a try!
Remember the property we used
to change the color of your site's canvas? How about the property
to put a background image into your site's canvas? Well, we
can use those same properties to give your table a little pizzazz!
Here's the code for a gray (my
favorite shade of gray uses the hex #CCCCCC) table (building
on the table we made in the last step of this chapter)...
<table
width="350" border="2" bordercolor="blue" bgcolor="#CCCCCC">
<tr bordercolor="white"><td>Cell
#1</td><td>Cell
#2</td><td>Cell
#3</td></tr>
<tr bordercolor="white"><td>Cell #4</td><td>Cell
#5</td><td>Cell #6</td></tr>
</table>
I put the new entry in bold for
you, just so it stands out a little better. We could have also
specified an image with the background property.
That table above look a little
like this...
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
Oops! Remember earlier, when we
gave the mini-borders a value of "white"? Well, before,
when we had a white background color (which is the default),
this made the mini-borders invisible. Now, however, they really
stand out. So, to fix this, all we have to do is set the bordercolor
value for our two rows to gray...
<table
width="350" border="2" bordercolor="blue" bgcolor="#CCCCCC">
<tr bordercolor="#CCCCCC"><td>Cell
#1</td><td>Cell
#2</td><td>Cell
#3</td></tr>
<tr bordercolor="#CCCCCC"><td>Cell #4</td><td>Cell
#5</td><td>Cell #6</td></tr>
</table>
BAM! Everything looks nice now.
We can also give each cell its own background color or image <td
bgcolor="red"> or <td
background="image.jpg">,
as well as each row <tr
bgcolor="green">.
It's all very simple and there's no need to be redundant and
go through all the possibilities here with that. Here's our
new, shaded table:
| Cell
#1 |
Cell
#2 |
Cell
#3 |
| Cell
#4 |
Cell
#5 |
Cell
#6 |
Lovely. Now it's your turn to
make a lovely, shaded table.
To center a table or align it
to the left, we simply place the table in an aligned paragraph
tag. For example, this code would align our table to the center...(I
made the table empty just to emphasize the paragraph tags surrounding
it.) It's really cake.
<p
align="center">
<table width="350" border="1"><tr><td></td></tr></table>
</p>
Another note about alignment,
by default, all the text you put in every cell is vertically
aligned in the middle. Often, we don't want that. For example,
if you have a very tall table, if the text is aligned to the
middle, it would be a pain to scroll all the way down to see
the text. The most common place we want to align our text vertically
is at the top. Here's an example of a tall table with text
aligned in the middle...
<table
width="100" height="250" border="1"><tr><td>Tall
Order!</td></tr></table>
You probably haven't seen the
height property above before - that's because it's usually
not very important. Here's what our tall table looks like by
default.
Do you see what I mean now? The
text is vertically aligned in the center. This is a big no-no.
Let's vertically align our text to the very top! (And also,
while we're at it, let's center our text horizontally, it doesn't
look right horizontall aligned to the very left!)
<table
width="100" height="250" border="1">
<tr>
<td valign="top"><p align="center">Tall
Order!</p></td>
</tr>
</table>
I put the new entries in bold. First,
you'll notice the valign property
within our cell. This vertically aligns anything within that
cell to either the top, bottom, or middle. (By default everything
is vertically aligned to the center - as we saw above - so
we specified "top" to push everything to the top.)
Next, you'll notice we inserted
a paragraph tag that was aligned to the center. This moves
our text to be horizontally aligned to the center. (Note, when
you use a <p> tag
to align text, it doesn't push that text down two spaces like
an empty <p> tag
would. That would make aligning very difficult!)
Here's our new, beautiful table.
Now, try to recreate this table
using your own HTML talents. Also, try to change the border
color and shading too, while you're at it!
This is the very last thing of
note for using tables, I promise. Get these two properties
down and you're all set to go.
The first is the cellpadding property.
This is extremely useful and should be used often. Before we
get into why it's useful, let me first demonstrate a common
problem when making a table.
Imagine you have a table that
looked like this...
| Hello! I am a problematic
table for a number of reasons... |
As you can see, with this table,
the text is just a little to close to our borders for comfort.
(Also of interest, note that even though this table has only
one cell, it still has a mini-border! Ugh!) This table simply
doesn't look professional. We can fix this with the cellpadding property.
Like its name suggests, this property adds 'padding' to the
inside of your cell, pushing the text away from the outsides.
The greater the cellpadding value
you specify, the farther away from the borders your text will
appear. (Your table doesn't even need borders for this to work!)
So let's take the code from the
table above and pad it! Let's also get rid of that annoying
mini-border by making it white.
<table
width="350" border="1" bordercolor="black" cellpadding="3">
<tr bordercolor="white"><td>
Hello! I was a problematic
table for a number of reasons...
</td></tr>
</table>
Now your table should look like
this...
| Hello!
I was a problematic table for a number of reasons... |
Much better! So what value of cellpadding should
we use? Well, each number represents a pixel. You usually only
need a couple pixels to make a big difference (in the example
above we used only '3' pixels).
cellpadding isn't
an only child. It has a sister named cellspacing.
While cellpadding creates
a buffer within a cell, cellspacing creates
a buffer outside of a cell. Not as useful, in my opinion, but
still very important.
You'd want to change the cellspacing value
of a table when you have text right beside your table (so that
the text outside doesn't come uncomfortably close to touching
the table's borders. Here's a quick display of two tables.
The first with no spacing specified and the second with cellspacing="3".
| I want spacing for Christmas! |
Usually you don't want to use
borders with the cellspacing property.
I used them above to show the difference. Notice how, in the
second table, outside of the cell's mini-border, it created
a buffer zone? If you don't use borders, you can use spacing
subtly and effectively.
You try!
Remember to keep reviewing previous
chapters. It's the only way to really remember all this stuff!
We're slowly approaching the end
of this tutorial. We've covered a tremendous amount of ground.
In the next chapter we'll fill in some holes that'll help you
organize your website a little better.
Previous
Chapter | Next Chapter |