Using Tables - Part 3

Previous page...

Rowspan and Colspan

You might want to give the whole table a heading that spans the width of both columns. To do this use the COLSPAN attribute with the <TD> or <TH> tag and set it equal to the number of columns you want the table cell to span as follows:

<TH COLSPAN="2">Creatures</TH>

Try the HTML above in your own HTML document and view it in a browser.

Creatures
Name	Size
Tyrannosaurus Rex	Biggest
Elephant	Big
Ant	Small

<TABLE BORDER="1">
	<TR>
		<TH COLSPAN="2">Creatures</TH>
	</TR>
	
	<TR>
		<TH>NameSize</TH>
	</TR>
	
	<TR>
		<TD>Tyrannosaurus Rex</TD>
		<TD>Biggest</TD>
	</TR>
	
	<TR>
		<TD>Elephant</TD>
		<TD>Big</TD>
	</TR>
	
	<TR>
		<TD>Ant</TD>
		<TD>Small</TD>
	</TR>
</TABLE>

Note:
When planning where elements will go going in your table always remember that you are starting in the top left corner and describing each row and the data cells within them in order from left to right. Draw it on paper first if you get confused.

In the same way, using the ROWSPAN attribute, you are able to create the table you see below.

 

Creatures	Name	Size
	Tyrannosaurus Rex	Biggest
	Elephant	Big
	Ant	Small

<TABLE BORDER="1">
	<TR>
		<TH ROWSPAN="4">Creatures</TH>
		<TH>Name</TH>
		<TH>Size</TH>
	</TR>
	 
	<TR>
		<TD>Tyrannosaurus Rex</TD>
		<TD>Biggest</TD>
	</TR>
	 
	<TR>
		<TD>Elephant</TD>
		<TD>Big</TD>
	</TR>
	
	<TR>
		<TD>Ant</TD>
		<TD>Small</TD>
	</TR>
</TABLE>

© 2003 Ashley Preston