Week Two, Day Four - Manipulating Your Table

Week Two, Day Four - Manipulating Your Table

Because today can get confusing very quickly, there will only be two commands. (Never say I didn't give you anything. ^_^!)

Open up your handy Notepad. Find the table that looks like this:

This table....
	... has 4 cells!

    All cells in the table follow a strict pattern: each column's worth of cells is exactly the same width. No cell is bigger than any other.

    This does not have to be. ^_^

    This command does NOT go into the 'table' tag. Rather, this command goes in the TD that you want to manipulate. In this case, go to the td that contains 'this table....', and type this.
<td colspan="2">

BEFORE YOU SAVE AND RELOAD:
Delete the 'empty' cell that is in the same table row.
NOW save and refresh.

This table....
	... has a cell that spans two columns!!

GREAT! Look at that! Neat!

But, the second row's cells are uneven. Easily fixed: Insert the 'width' command with 50 percent into the TDs on the second row, and everything's spiffy again.

This table....
	... has a cell that spans two columns (that are of equal width)!!

    Now, this is where the possibility of confusion increases by a nice order of magnitude. I'll say everything very exactly, so pay close attention....

    There's a similar command to colspan that deals with rows.
rowspan

    Take a look at your table. Delete the 'colspan' command from the first row. Delete the widths from your second row TDs.
    Move the 'empty' first cell from the second row, the one with no text, to the first row, as a second cell.
    In the first row, in the first TD, insert this command:
rowspan="2"

    Save and reload.

This table....
	... has a cell that spans two rows!

    The empty cell belongs properly on the first row. The doubled cell also belongs on the first row. The cell with much text belongs on the second row, and note that it is the only one on the second row.

    See why it can get confusing fast? ~_~.

Challenge for the day:
    Recreate this table:

You have learned much in a very short amount of time. I am very proud of you! See what you can do when you put your mind to it?	A challenging puzzle, but not unsolvable. Keep at it!
	Given time and practice, you too can program very complex table systems.
I'll give you a hint: This is the first column of the third row!

That was complex enough that I think we can stop for today. Week Two, Day Four: Manipulating Your Table.

This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002. Sanna@SannaSK.com
HTML 3-A-Day
Main Index
SannaSK.com
Hosted by CaravanMultimedia.com