Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

XHTML Tutorial - Creating Nested Tables

By: FYIcenter.com

(Continued from previous topic...)

How To Create Nested Tables?

You can create nested tables by including a child table inside a cell of the parent table. Below is a tutorial example of nested tables:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Nested Tables</title>
  <style type="text/css">tr.small {font-size: 9pt}</style>
 </head>
 <body>
  <table border="1" width="400" 
   style="background-color: #eeeeee">
   <caption>Online Order</caption>
   <tr>
    <th align="left">Description</th>
    <th align="right">Qty</th>
    <th align="right">Price</th>
    <th align="left">Email account note</th>
   </tr>
   <tr>
    <td>Email Account</td>
    <td align="right">10</td>
    <td align="right">$9.90</td>
    <td align="left" rowspan="5">
     <table border="1">
      <tr class="small"><td>Mailbox</td><td>10GB</td></tr>
      <tr class="small"><td>Webmail</td><td>Yes</td></tr>
      <tr class="small"><td>POP3</td><td>Yes</td></tr>
      <tr class="small"><td>IMAP</td><td>Yes</td></tr>
      <tr class="small"><td>Anti-Spam</td><td>Yes</td></tr>
     </table>
    </td>
   </tr>
   <tr>
    <td>FYIcenter.com Ad</td>
    <td align="right">1</td>
    <td align="right">$99.00</td>
   </tr>
   <tr>
    <td>1-year Access</td>
    <td align="right">1</td>
    <td align="right">$199.00</td>
   </tr>
   <tr>
    <td colspan="2" align="right">Shipping</td>
    <td align="right">$3.99</td>
   </tr>
   <tr>
    <td colspan="2" align="right">Tax</td>
    <td align="right">$15.99</td>
   </tr>
  </table>
 </body>
</html>

If you save the above document as nested_table.html, and view it with Internet Explorer, you will see that a child table is nested in a parent table as shown below:
            Nested Tables

  1. What Is a "table" Tag/Element?
  2. What Is a "tr" Tag/Element?
  3. What Is a "td" Tag/Element?
  4. What Are the Attributes of a "table" Element?
  5. How To Create Table Borders?
  6. How To Turn On Some Parts of Table Outer Borders?
  7. How To Control White Spaces between Table Cells?
  8. How To Control Padding Spaces within a Table Cell?
  9. How To Control Table Widths?
  10. What Happens If One Row Has Missing Columns?
  11. How To Control Horizontal Alignment in Table Cells?
  12. How To Control Vertical Alignment?
  13. How To Add Column Headers to a Table?
  14. What Is a "caption" Tag/Element?
  15. How To Merge Cells in a Row?
  16. How To Merge Cells in a Column?
  17. How To Create Nested Tables?

Selected Developer Jobs:

More...