WebDevelopersNotes logo

home-icon Home / HTML / HTML table code – Tables part 4

HTML table code – Tables part 4

HTML table code - Tables part 4

How would you design a table that looks similar to one below?

Table to create

Okay, here goes…
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 1 Row 1
Row 2
Row 3

Sponsored Links

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>
Satisfying hunger?
Full apple Bite taken Nothing left

The code shows that the table consists of two rows. The first row contains only one cell which carries COLSPAN=”3″ attribute. Thus, this cell will be stretched over three columns. The next row has three cells that make three columns. As an added bonus, cells of the second row have a different background color.

Actually the second row HAS to consist of three cells for the first row to span them correctly. Browsers generally will not display tables properly if there is difference between the number of columns specified in COLSPAN and the actual number of columns made via <TD> tag.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Internet Explorer jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The record for the maximum number of tweets in a second is 143,199. This happened on 3rd August 2013 in Japan when "Castle in the Sky", an animated movie, was being aired on TV. Fans tweeted the word "balse" at the exact time it appeared in the movie. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy