Creating Nested HTML Tables


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"
  <title>Nested Tables</title>
  <style type="text/css">tr.small {font-size: 9pt}</style>
  <table border="1" width="400" 
   style="background-color: #eeeeee">
   <caption>Online Order</caption>
    <th align="left">Description</th>
    <th align="right">Qty</th>
    <th align="right">Price</th>
    <th align="left">Email account note</th>
    <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>
    <td> Ad</td>
    <td align="right">1</td>
    <td align="right">$99.00</td>
    <td>1-year Access</td>
    <td align="right">1</td>
    <td align="right">$199.00</td>
    <td colspan="2" align="right">Shipping</td>
    <td align="right">$3.99</td>
    <td colspan="2" align="right">Tax</td>
    <td align="right">$15.99</td>

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:

HTML table Element - Nested Tables
HTML table Element - Nested Tables


HTML Forms and Input Fields

'rowspan' - Merging Cells HTML Table Columns

HTML Tables and Table Cells

⇑⇑ HTML Tutorials

2017-04-22, 1773🔥, 0💬