And now...MORE tables!

Okay - we've discussed basic tables and what you can do in them: now let's fancy 'em up a little.

You will recall that the basic tags for tables are <TABLE>...</TABLE>, <TR>...</TR> and <TD>...</TD>.
There are additional parameters for the <TR>...</TR> and <TD>...</TD> tags; one of these new tags allowed the word "TABLE" to be displayed vertically along the side of the first table on the previous page.

THIS tag... ...will do this:
<COLSPAN=value> The value represents the number of vertical columns that the cell will span, or extend across.
<ROWSPAN=value> The value represents the number of horizontal rows that the cell will span, or extend downard beside.

This concept is a doozy...the only real way to explain it properly is to once again create a table using the new tags, then show you the code. So, without further adeiu...

This cell spans two columns This cell spans just one column
cell 1 cell 2 cell 3
cell 4 -
spans 2 rows
cell 5 - spans 2 cells
cell 6 cell 7
cell 8 - spans 3 cells

I've put "cell 1", "cell 2", and so on in the cells to make it easier to track the way the code displays the table. Just play with code until you get what you want - that's what I had to do to get this page to come out correctly (no kidding!). Anyway, here is the code that displayed the above table; if you don't already have one, this will give you an appreciation for the concept of aligning tags:


<TABLE BORDER=2>
    <TR>
	<TD COLSPAN=2><FONT SIZE=-1>This cell spans two columns</FONT>
	</TD>
	<TD><FONT SIZE=-1>This cell spans just one column</FONT>
	</TD>
    </TR>
    <TR>
	<TD><FONT SIZE=-1>cell 1</FONT>
	</TD>
	<TD><FONT SIZE=-1>cell 2</FONT>
	</TD>
	<TD><FONT SIZE=-1>cell 3</FONT>
	</TD>
     </TR>
     <TR>
	<TD ROWSPAN=2><FONT SIZE=-1>cell 4 -<BR>spans 2 rows</FONT>
	</TD>
	<TD COLSPAN=2><FONT SIZE=-1>cell 5 - spans 2 cells</FONT>
	</TD>
    </TR>	
    <TR>
	<TD><FONT SIZE=-1>cell 6</FONT>
	</TD>
	<TD><FONT SIZE=-1>cell 7</FONT>
	</TD>
    </TR>
    <TR>
	<TD COLSPAN=3><FONT SIZE=-1>cell 8 - spans 3 cells</FONT>
	</TD>
    </TR>
</TABLE>

Missed the first part of tables...? it's just one page back!
Forms... right here!


This page hosted by
Get your OWN FREE HOME PAGE

HomeBack to Navpooh's Home Port

HTML indexBack to HTML tutorial index

Last updated Saturday, December 27, 1997