Webhelp.org Presents:
Crashcourse In Tables!
What Is A Table?
THIS IS A TABLE!
NOW  LEARN  HOW!

Now that your memory is refreshed to what a table is, let me show you how to make one. Let's start simple....We'll use the data from the above table.

<TABLE>
<CAPTION>What Is A Table?</CAPTION>
<TD>THIS
<TD>IS A
<TD>TABLE!<TR>
<TD>NOW
<TD>LEARN
<TD>HOW!<TR>
</TR>
</TD>
</TABLE>

As you can see, you start by defining the TABLE, you may add a CAPTION (optional), each "CELL" of the TABLE starts with TD (which stands for Table Data) and from what I was taught, does not need to end with /TD until the last Table Data, A TR defines a new Table Row and does not need to end with /TR until the last Table Row and the whole shooting match ends with a /TABLE!


Reason being for my pointing out that your TABLE tags: <TD> and <TR>, do not need to end with </TD> and </TR> is because everything I have read, even from the NCSA and W3, show that, similair to the <P> tag, if another of the same tag is encountered, the previous one is automatically terminated. For example: If a browser reads a <TD> and encounters another <TD> then the first one does not require the typical </TD>.

OK, so now I'm rambling, but it has been brought to my attention that what I may be teaching is bad HTML style. I do admit that with proper termination and indentation throughout a document, that a document's code is easier to read and edit and troubleshoot, and besides, all the WYSIWYG editors WILL add the termination tags and indentation, so, what I have done is included the above example with "proper" termination and indentation, so you may use such techniques at your own discretion.

<TABLE>
   <CAPTION> What Is A Table? </CAPTION>
   <TR>
      <TD> THIS </TD>
      <TD> IS A </TD>
      <TD> TABLE! </TD>
   </TR>
   <TR>
      <TD> NOW </TD>
      <TD> LEARN </TD>
      <TD> HOW! </TD>
   </TR>
</TABLE>

 
What Is A Table?
THIS  IS A  TABLE!
NOW  LEARN  HOW!

Hey!!! The table doesn't have a border!!! To give a border definition you would simply add to the table line:

<TABLE BORDER=1>

This will give your table a BORDER!
What Is A Table?
THIS  IS A  TABLE!
NOW  LEARN  HOW!

You can even define cell's spacing and padding on this line:

<TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>

Well that's fine and dandy, but the data inside the tables aren't centered like in the above example!  That's easy to fix!  In each TD you can define the data's alignment.

<TD ALIGN=CENTER>

This will center any data within the cell.
What Is A Table?
THIS  IS A  TABLE!
NOW  LEARN  HOW!

Well this Black and White on Blue is Pretty darn boring!!!! What can I do about it!


<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">THIS
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">IS A
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">TABLE!<TR>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">NOW
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">LEARN
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">HOW!<TR>
</TR>
</TD>
</TABLE>

Using Hexadecimal Color Codes (the same ones you use to define the body of a page) you can define each cell's characteristics, including font face.
What Is A Table?
THIS  IS A  TABLE!
NOW  LEARN  HOW!

Anything you wish can go between the <TD> and the next <TD> or </TD> commands. Say, images for instance:

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">THIS
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">IS A
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">TABLE!<TR>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">NOW
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">LEARN
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">HOW!<TR>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">MISTER
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF"><IMG SRC="happyface.gif">
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">HAPPYFACE<TR>
</TR>
</TD>
</TABLE>
What Is A Table?
THIS  IS A  TABLE!
NOW  LEARN  HOW!
MISTER  HAPPYFACE

Colspan and RowspanSay you want one of your rows to take up two or more columns or vice versa. This is where the COLSPAN and ROWSPAN tags come into play. The easy one to use is COLSPAN. This tag determines how many columns across a cell of a table will be.

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER COLSPAN=3>THIS IS A TABLE!<TR>
<TD ALIGN=CENTER>NOW
<TD ALIGN=CENTER>LEARN
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>

What happens here is "NOW LEARN HOW" takes up 3 cells in the second table row. Therefore, when the colspan is three, only one cell is shown for the top. This appears like this:
 
What Is A Table?
THIS IS A TABLE!
NOW  LEARN  HOW!

If a colspan of two was used, one cell would be left over on the top row.

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER COLSPAN=2>THIS IS A
<TD ALIGN=CENTER>TABLE!<TR>
<TD ALIGN=CENTER>NOW
<TD ALIGN=CENTER>LEARN
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>
What Is A Table?
THIS IS A  TABLE!
NOW  LEARN  HOW!
The rowspan is a little tricky to keep track of. Since the cell expands down a column the number of rows you specify, the other table rows will be short on cell..... Here's an example:

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER ROWSPAN=3>THIS IS A TABLE!
<TD ALIGN=CENTER>NOW<TR>
<TD ALIGN=CENTER>LEARN<TR>
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>
What Is A Table?
THIS IS A TABLE!  NOW
LEARN
HOW!

You see, the first row is "THIS IS A TABLE" and "NOW", but "THIS IS A TABLE" takes up three rows, thus one column is "borrowed" from the next two rows.

Now that you know quite a bit about tables, you can return to Jonny's HTML Headquarters!


 

webhelp.org
E-Mail Jonny Webhead