Hi, I am trying to create a nested table in my HTML document. I've made 1 of 3 but I don't know how to insert the next table. It seems logical to create a new table tag and start a new table but because I need a nested table that doesn't seem to cut it. I guess the nested table thing is throwing me off. Can someone give me some pointers or point me to a reference for writing a nested table? Any help would be appreciated. Thank you.

Here's what I have written so far:

    <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >

<title> Cameron Cookies </title>

</head>


<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cameron Cookies</h1>

<h2 style="font-style: italic; text-align: center;">The best homemade cookies in New England</h2>

<p style="text-align: center;">99 Sycamore St. Portland, ME 04101 (207) 555-1212</p>

<table width="500" border="0">
    <tr>
        <td align="center"><a href="about.htm">About Us</a></td>
        <td align="center"><a href="mailto:cookiemaster@cameroncookies.com">Contact Us</a></td>
        <td align="center"><a href="orderform.htm">Place an Order</a></td>
        <td align="center"><a href="recipe.htm">Sample Recipe</a></td>
    </tr>
</table>

<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
    <tr>
        <th>Personal Information</th>
    </tr>

    <tr> 
        <td>First Name:</td> 
        <td><input name="fname" id="fname" size="30" type="text" /></td> 
    </tr> 

    <tr>
        <td>Last Name:</td>
        <td><input name="lname" id="lname" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>Address:</td>
        <td><input name="address" id="address" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>City:</td>
        <td><input name="city" id="city" size="35" type="text" /></td>
    </tr>

    <tr>
        <td>State:</td>
        <td><input name="state" id="state" size="3" type="text" /></td>
    </tr>

    <tr>
        <td>Zip Code:</td>
        <td><input name="zip" id="zip" size="10" type="text" /></td>
    </tr>

    <tr>
        <td>Country:</td>
        <td><input name="country" id="country" size="10" type="text" /></td>
    </tr>
</table>
</form>
  • Ashley, don't take this the wrong way, but you are demonstrating bad coding styles here. The code you are creating will have accessibility problems and other issues. Please take the time to review Dan's and Dewey's answers below and find a resource where you can learn modern, standards-based HTML. Doug almost 5 years ago

3 answers

2
points
This was chosen as the best answer

You would just start up another table like normal except start it inside of a TD tag, like so:

<table>
    <tr>
        <td>"parent" table</td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>nested table</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Answered almost 5 years ago by Matt Milburn
danwellman 5600
4
points

You can nest a table by inserting it as the child of another <td> element, like this:

<table border="0" cellpadding="0" width="300">
    <tr>
        <td width="100">A normal cell</td>
        <td width="200">
            <table border="0" cellpadding="2" width="200">
                <tr>
                    <td>A cell in a nested table</td>
                <tr>
            </table>
        </td>
    <tr>
</table>

That is obviously a much simplified example, but it's as easy as that.

However, unless that's mark-up intended for an HTML email you shouldn't use tables for layout like that. Tables are for tabular data.

Your navigation would be much better as an unordered list element, like this:

<ul>
    <li><a href="about.htm">About Us</a></li>
    <li><a href="mailto:cookiemaster@cameroncookies.com">Contact Us</a></li>
    <li><a href="orderform.htm">Place an Order</a></li>
    <li><a href="recipe.htm">Sample Recipe</a></li>
</ul>

This form should be coded like this:

<form name="Web Order Form" id="Web Order Form" action="server_side_filename.php" method="post">
        <h3>Personal Information</h3>
        <label for="fname">First Name:</label> 
        <input name="fname" id="fname" size="30" type="text" />
        <label for="lname">Last Name:</label>
        <input name="lname" id="lname" size="30" type="text" />
        <label for="address">Address:</label>
        <input name="address" id="address" size="30" type="text" />
        <label for="city">City:</label>
        <input name="city" id="city" size="35" type="text" />
        <label for="state">State:</label>
        <input name="state" id="state" size="3" type="text" />
        <label for="zip">Zip Code:</label>
        <input name="zip" id="zip" size="10" type="text" />
        <label for="country">Country:</label>
        <input name="country" id="country" size="10" type="text" />
</form>

Also, the <img> shouldn't be in the <head> of the page, the <head> should only contain meta tags, links to stylesheets and/or other resources such as a favicon, the <title> and occasionally <script> elements (although these should really go at the end of the <body>)

Answered almost 5 years ago by danwellman
  • Great, thorough answer, Dan. Doug almost 5 years ago
1
point

Hi Ashley,

I am not exactly sure what you are asking here. You can create a table with in a table by doing the following:

<table>
<tr>
    <td>
        <table>
            <tr>
                <td></td>
            </tr>
        </table>
    </td>
</tr>

However, the way you are going about writing your page here is a little off. First off tables are used for displaying data and not layout. Table design was the primary layout method back in the 90's and has since been replaced with Divisions (<div>). I will show you your code updated reflecting this method in a link below.

Also I see that you are including an image in the <head></head> area. This tag belongs in the <body></body> portion.

I would suggest you read this article: http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ and http://www.w3schools.com/html/html_css.asp.

Your code updated using divisions: http://pastie.org/808229

Let me know if you have any questions.

-- Dewey Bushaw / www.styledev.com

Answered almost 5 years ago by Dewey Bushaw
  • +1 for the great Smashing Magazine article. One update your code example could use is moving the inline H1 and H2 styles to the style declarations in the HEAD. But baby steps... Doug almost 5 years ago