Sheeze!

Here are some table tips to help get you started at understanding tables better. I've tried to explain in detail as much as possible. If you like this article, please link to it here at the Lil' Hangout. Thanks...

Think of tables as a grid. Each square is a cell. You can border the cells border="1" or have cells appear with no border border="0" .

The <TABLE> and </TABLE> tags must surround the entire table definition. You can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags.

Each row of a table is, essentially, formatted independently of the rows above and below it. Table Attributes span columns of the table.

Table Elements

<TABLE> ... </TABLE>
defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.

<TR> ... </TR>
specifies a table row within a table. You may define default attributes for the entire row: ALIGN ( LEFT , CENTER , RIGHT ) and/or VALIGN ( TOP , MIDDLE , BOTTOM ). See Table Attributes at the end of this table for more information.

<TH> ... </TH>
defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

<TD> ... </TD>
defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Table Attributes

ALIGN (LEFT, CENTER, RIGHT)
Horizontal alignment of a cell.

VALIGN (TOP, MIDDLE, BOTTOM)
Vertical alignment of a cell.

COLSPAN= n
The number ( n ) of columns a cell spans.

ROWSPAN= n
The number ( n ) of rows a cell spans.

General Table Format

The most basic table has 1 row, and 1 column.

Code:

<TABLE BORDER=1>
  <TR>
    <TD>
       hello
    </TD>
  </TR>
</TABLE>

I used "border=1" so the border would be visible. In most cases we don't want the border to show when the page is finished, but I find it helpful to keep it visible while I'm working on the page so I can figure out why it doesn't look the way I intended. You can leave out the "border=1" or change it to "border=0" if you don't want a visible border.

The table always begins with a table tag, followed immediately by a table row (tr) tag. and then a table data (td) tag. If we want to have 2 columns in our table, we would do it as follows:

Code:

<TABLE BORDER=1>
  <TR>
    <TD>
       hello
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
</TABLE>

Everything within the tr (table row) tags makes up the first row of the table. We could make a second row under the first, by making a second tr tag and putting td (table data) tags inside it.

You have to be careful with tables. If you make a tiny mistake in one part of a table, it may show up as a strange display on a far different part of the table, or even on a different part of the page.

Once you understand the basics of tables, you can make them a bit fancier. Taking the same simple table above let's color it: We'll use a light yellow background with a light blue border.

Code:

<TABLE BORDER=5 bgcolor="#ffffcc" bordercolor="#6699ff">
  <TR>
    <TD>
       hello
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
</TABLE>

Cellpadding and Cellspacing

Cellpadding refers to the amount of space allowed inside the cell, around the contents. As an example, here's the same table, with cellpadding set to 15.

Code:

<TABLE BORDER=5 bgcolor="#ffffcc" bordercolor="#6699ff" CELLPADDING=15>
  <TR>
    <TD>
       hello
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
</TABLE>

And now we'll add cellspacing at 15, to show the effect that will have. Cellspacing adds space within the cell border.

Code:

<TABLE BORDER=5 bgcolor="#ffffcc" bordercolor="#6699ff" CELLPADDING=15 CELLSPACING=15>
  <TR>
    <TD>
       hello
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
</TABLE>

Colspan and Rowspan

The normal table sets itself up so that the columns and rows line up neatly. You can tell it to make parts of your table different, though. If you want 2 columns in all of the table except one part, which has only 1, the Colspan can be set to make those changes.

Code:

<TABLE BORDER=5 bgcolor="#ffffcc" bordercolor="#6699ff">
  <TR>
    <TD>
       hello 1
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
  <TR>
    <TD COLSPAN=2>
       hello 2 spans 2 columns
    </TD>
  </TR>
  <TR>
    <TD>
       hello 3
    </TD>
    <TD>
       how are you?
    </TD>
  </TR>
</TABLE>