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.

Web designer vs. web developer

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

Smartphones and tablets are actually responsible for decreasing energy consumption because people have been using these devices to do things they would have normally done using larger, more energy consuming systems like computers, TVs and game consoles. [more...]

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