|
|
It's actually two tables, one inside the other.
Here's the first table:
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="200" BGCOLOR="#FF0000">
<TR>
<TD>
</TD>
</TR>
</TABLE>
That code gives you a red box. That's all you get. It looks like this:
| ------ empty box ------- |
The main part of the text box, with your written text and so on, is a second table inserted inside. This inserted table will fit inside that red square, covering nearly all of the colored part, except for the edges. So now you know the secret: The border is just an illusion.
Here's the complete code for that example box (with the new code written in red):
OK. Take a second to look at that. (If you make your pages with an HTML editor, all you have to do is first make the "red" table, 1 row, 1 column, and then click inside it and make a second table. No problems!) Next, I'll look at the most important bits you can change to make this table suit your own page.
First, notice the main table's "width" value. This is the width in pixels for your box. It's the bit in red below:
You can change this value to experiment with various sizes.
Now let's look at the rest of that first "table" bit of code. Click each part to read an explanation.
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="200" BGCOLOR="#FF0000">
BORDER="0" - this means that the table will have no "table lines" around it. It's easy to get confused here. Let me show you what I mean.
If you have a border of 0 in a small, purple table, it looks like this:
example purple table, border="0"
If the border is 1, it looks like this:
example purple table, border="1"
And if the border is 3, it looks like this:
example purple table, border="3"
So what we want with the first table is no border, and the background color of this first table is going to be the "edge" of the box that people see on your web page.CELLPADDING="2" - This determins the thickness of your final "edge" border.
If you put a 1 there, the line is thinner:
This is the same table from the first example, but with CELLPADDING="1".
If you put a 3 there, the line is thicker:
This is the same table from the first example, but with CELLPADDING="3". CELLSPACING="0" - This isn't relevant here. Your background box has only 1 row, 1 column. in other words, there is only one cell. You only need to care about this if you have more than 1 row or more than 1 column.
WIDTH="200" - I talked about this at the beginning of this section.
BGCOLOR="#FF0000" - This determines the color of the edge border line. I chose red, but you can type in the code for any color you'd like. (For more info on colors, see the "colors" tutorial page, or jump straight to the color chart.)
OK, that's all the info there is to know about the first table, which creates the
edge border line. Of course, you don't have an edge border line yet; all you have
is a colored box. You now have to put a second table inside that box. So let's look
at the code for that "inside" table. (See the example
code above for the full code.)
In the first example, we had a white box of text with a red border. We've already
learned that this is created by first creating a totally red box, and then putting
a white box inside it. In this section, we'll look at this "inside" table.
Here's the code line for the table from the first example:
<TABLE BORDER="0"
CELLPADDING="2" CELLSPACING="0" WIDTH="100%" BGCOLOR="#FFFFFF">
CELLPADDING=2 - Now that we're talking about a regular table, we can stop thinking of this number as the width of the edge border. In fact, it tells us how much space there should be between the edges of the cells and the content of the cells. Here are three examples (with a blue background)
This table has CELLPADDING="0"
This table has CELLPADDING="2"
This table has CELLPADDING="6"
WIDTH="100%" - This is important. When you're finished, you want the final box to have a uniform edge -- you want the line to be the same on all sides. So, make sure that the inside box covers it all the way: 100%.
"Wrapped Box"
On this page, you'll also see how to make this kind of "pull quote" box, like the ones you seen on CNN.
BGCOLOR="#FFFFFF" - You've already chosen a color for the edge of the box. You now have to choose a color for the inside part. White is best if your page's background is white, and you're only interested in making a box with a colored edge to it.That's all there is to it.
CELLSPACING:
If you want to have a more complex box, then you can play with the CELLSPACING
values. Here are two examples; the only difference between them is the CELLSPACING
value.
| - | The table: | The code: | ||||||
| Example 1: |
|
|
||||||
| The table: | The code: | |||||||
| Example 2: |
Notice the thin green line dividing the two sections. Here's the same thing below, but with a different color scheme:
|
|
| - | Play around with CELLPADDING | ||||||
|
|
|
||||||
You've probably seen these on CNN. It's really very simple: you use the same bit
of code that you'd use for a graphic.
Here's the code for the "wrapped box" example earlier
on this page (new code in red):
If you type "LEFT" instead, the box will be on the left side of the
page. (Note that the " gives you a "
on the page.)
|
Bill Pellowe |