Introduction to HTML 7: More Adv Table Commands

Nested Tables


Here's a quick example:
Table one, cell one
Table one, cell two
Table two, cell 1
Table two, cell 2
Table two, cell 3
Table two, cell 4
Table one, cell three
Table one, cell four

Here's the code for the above table:

<table width="80%" border="1" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td width="30%" align="center">Table one, cell one</td>
    <td width="70%" align="center">Table one, cell two
      <table width="80%" border="1" align="center" cellpadding="2" cellspacing="2">
        <tr>
          <td align="center">Table two, cell 1</td>
          <td align="center">Table two, cell 2</td>
        </tr>
        <tr>
          <td align="center">Table two, cell 3</td>
          <td align="center">Table two, cell 4</td>
        </tr>
      </table>

    </td>
  </tr>
  <tr>
    <td height="42" align="center">Table one, cell three</td>
    <td align="center">Table one, cell four</td>
  </tr>
</table>


How It's Done

First off, you should really know how to do a simple table before attempting to tackle this monster.

Now, for those of you already up to speed on tables, you can probably pick it up from the code how it's done. You simply make a point of ending every line with an end command. This is the biggist problem with nested tables - open tags..

NOTE: try creating all the tables separately, making sure every section has its own end commands. I create the outside table first. Then create inside table - or nested table by first typing the tag pair <TABLE> </TABLE>, then the rows <TR></TR>, and last the columns or data cells <TD></TD>. You can also create the smaller table first, and then a separate table - the outside table and then just cut and paste it in the smaller table into the larger table.

 
 
 Home
 Previous
Next