BORDER
We’ve already learned about the BORDER attribute. It’s what controls the width of the border that surrounds your table, measured in pixels. On all of the tables we’ve looked at so far, we’ve used a border of 1. You can change the thickness of the border to meet your needs. You can have a thick border:
<TABLE BORDER="3">
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
You can have a really thick border:
<TABLE BORDER="10">
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
You can even have no border at all (this is a common trick used by Web designers. We’ll be doing a lot more of this next week):
<TABLE BORDER="0">
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
BGCOLOR
Wait, you’ve seen that attribute before, right? We’ve already used the BGCOLOR attribute with the BODY tag. Guess what? You can use it with the TABLE tag and the TD tag. If you use it with the TABLE tag, you change the background color of the entire table. If you use it with the TD tag, you change the background color of just one cell.
Here are a couple of examples:
<TABLE BORDER="1" BGCOLOR="#FFFF00">
<TR>
<TD>Cell #1</TD>
<TD>Cell #2</TD>
<TD>Cell #3</TD>
</TR>
</TABLE>
| Cell #1 | Cell #2 | Cell #3 |
<TABLE BORDER="1">
<TR>
<TD BGCOLOR="#FFFF00">Cell #1</TD>
<TD BGCOLOR="#99CCFF">Cell #2</TD>
<TD BGCOLOR="#CCCCCC">Cell #3</TD>
</TR>
</TABLE>
| Cell #1 | Cell #2 | Cell #3 |
COLSPAN
This is a really useful attribute. Look at this table:
| The Brady Bunch | ||
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
Notice the first row? I created a row with one cell that stretched all the way across the table. Pretty neat, don’t you think? Here is the code for the first row:
<TR>
<TD COLSPAN="3" ALIGN="center"><B>The Brady Bunch</B></A>
</TR>
Notice that inside the TD tag, there is a COLSPAN attribute. This says that you would like this cell to cover the width of 3 columns. You can change this number to meet your needs, but since this table is only 3 columns wide, that is the number that I used.
A Sample Web Page
OK, you’ve learned quite a bit today. Let’s put this all together to create a page containing a neat table. Take a look at this code.
<HTML>
<HEAD>
<TITLE>Tables (Part 1)</TITLE>
</HEAD>
<BODY>
<FONT FACE="arial, helvetica" SIZE="-1">
<P><TABLE ALIGN="center" BORDER="3" WIDTH="100%">
<TR>
<TD COLSPAN="4" BGCOLOR="#000000" ALIGN="center"><FONT COLOR="#FFFFFF">
<B>Some HTML Tags</B></FONT></TD>
</TR>
<TR>
<TD ALIGN="center" BGCOLOR="#FFFF00"><B>Effect</B></TD>
<TD ALIGN="center" BGCOLOR="#FFFF00"><B>Code</B></TD>
<TD ALIGN="center" BGCOLOR="#FFFF00"><B>Code Used</B></TD>
<TD ALIGN="center" BGCOLOR="#FFFF00"><B>What It Does</B></TD>
</TR>
<TR>
<TD>Bold</TD>
<TD>B</TD>
<TD><B>Bold</B></TD>
<TD><B>Bold</B></TD>
</TR>
<TR>
<TD>Italic</TD>
<TD>I</TD>
<TD><I>Italic</I></TD>
<TD><I>Italic</I></TD>
</TR>
<TR>
<TD>Underline</TD>
<TD>U</TD>
<TD><U>Underline</U></TD>
<TD><U>Underline</U></TD>
</TR>
<TR>
<TD>Line Break</TD>
<TD>BR</TD>
<TD><BR></TD>
<TD>This <B>BR</B>eaks the text and starts it again on the next line. It’s like hitting the “Enter" key on your computer when typing text.</TD>
</TR>
<TR>
<TD>Paragraph</TD>
<TD>P</TD>
<TD><P></TD>
<TD>This stands for <B>P</B>aragraph. It does the exact same thing as <BR> except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.</TD>
</TR>
<TR>
<TD>Horizontal Rule</TD>
<TD>HR</TD>
<TD><HR></TD>
<TD>This command gives you a line across the page. (<B>HR</B> stands for Horizontal Rule.) The line right just below this chart was made using an <HR> tag.
</TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
You have now completed the Week 9 Lesson. Please re-read this information until you feel that you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 9 Assignments.
