Tutorials All - Webdesign, Graphic Design

Visit our new Webdesign Templates,css,html5 etc

Download New Android Applications

Visit our new Collections of Android Application

23.2.12

HTML Tables

-->

There are two ways to look at this. We can consider the table to consist of two columns with the second column divided into three rows OR, the other way is to understand that the first column spans three rows. HTML uses the second line of thought for laying out the table.
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" 
WIDTH="300" HEIGHT="200">

<TR>
<TD ALIGN="CENTER" ROWSPAN="3" WIDTH="100">Column 1</TD>
<TD ALIGN="CENTER" WIDTH="200">Row 1</TD>
</TR>

<TR>
<TD ALIGN="CENTER">Row 2</TD>
</TR>

<TR>
<TD ALIGN="CENTER">Row 3</TD>
</TR>

</TABLE>
Column 1Row 1
Row 2
Row 3
As the code shows, The table consists of three rows. The first contains two cells 

while the other two have only one cell.
The first cell of the first row has ROWSPAN attribute set to 3. The ROWSPAN attribute forces this cell to span 3 rows. Get it?

Now lets look at COLSPAN
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" 
WIDTH="300" HEIGHT="70">

<TR>
<TD ALIGN="CENTER" COLSPAN="3"><B>Satisfying hunger?
</B></TD>
</TR>

<TR>
<TD ALIGN="CENTER" WIDTH="100" BGCOLOR="#DDFFDD"><IMG 
SRC="apple1.gif" WIDTH="32" HEIGHT="32" ALT="..."></TD>
<TD ALIGN="CENTER" WIDTH="100" BGCOLOR="#AAFFAA"><IMG 
SRC="apple2.gif" WIDTH="32" HEIGHT="32" ALT="..."></TD>
<TD ALIGN="CENTER" WIDTH="100" BGCOLOR="#00C000"><IMG 
SRC="apple3.gif" WIDTH="32" HEIGHT="32" ALT="..."></TD>
</TR>

</TABLE>