Nested Tables

Table Data and Table Header Attributes

• Colspan: Specifies how many cell columns of the table this cell should span.
• Rowspan: Specifies how many cell rows of the table this cell should span.
• Align: cell data can have left, right, or center alignment.
• Valign: cell data can have top, middle, or bottom alignment.
• Width: you can specify the width as an absolute number of pixels or a percentage of the document width.
• Height: You can specify the height as an absolute number of pixels or a percentage of the document height.

Basic Table Code

<TABLE BORDER=1 width=50%>

<CAPTION>  <h1>Spare Parts <h1> </Caption>

         <TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>

         <TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>

         <TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font> </TD><TD>47.50</TD></TR>

         <TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>

</TABLE>

Column and Row Span

Table cells have two important attributes

Column and Row Span – Example

<table cellspacing="0">

    <tr class="1"><td>Cell[1,1]</td>

        <td colspan="2">Cell[2,1]</td></tr>

    <tr class=“2"><td>Cell[1,2]</td>

        <td rowspan="2">Cell[2,2]</td>

        <td>Cell[3,2]</td></tr>

    <tr class=“3"><td>Cell[1,3]</td>

        <td>Cell[2,3]</td></tr>

</table>

What will be the output?

<TABLE BORDER width=“750”>

   <TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>  

  <TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD colspan=“2”>Feature Article</TD> <TD rowspan=“2” width=“25%”>Linked Ads</TD></TR>

                                                                                                               

<TR><TD width=“25%”>News Column 1 </TD> <TD width=“25%”><News Column 2 </TD></TR>

</TABLE>

The Output