nested html tables causes w3c compliant error

Hi!

I have removed most of the text below for readibility.

When I run the w3c validator against this code I only get one error, but the solution is eluding me.

Here is the error:

document type does not allow element "TABLE" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
...le width="348" align="center" border="0" id="table4">
----------------------------------------------------------------------------------------------------------------------------

<table cellSpacing="0" cellPadding="0" width="600" align="center" border="0" id="table1">
   <tr>
      <td>
          <table class="outerborder" cellSpacing="0" cellPadding="0" width="600" align="center" bgColor="#ffffff" border="0" id="table2">
       <tr>
           <td align="center">
                 <table cellSpacing="0" cellPadding="0" width="90%" border="0" id="table3">
            <tr>
                <td class="ver11"><font face="Arial"><b>Service Level Agreement</b></font>
                   <p>&nbsp;</p>
                  <font face="verdana" size="1">
                               <table width="348" align="center" border="0" id="table4">
                         <tr>
                                  <td>
                                      <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
                                        Website Availability</font></td>
                        <td>
                        <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
                        Credit Percentage</font></td>
                                   </tr>
                          <tr>
                        <td><font size="2">95% to 100%</font></td>
                        <td><font size="2">0%</font></td>
                                                       </tr>
                          <tr>
                        <td><font size="2">90% to 94.9%</font></td>
                        <td><font size="2">10%</font></td>
                                                             </tr>
                                 <tr>
                                          <td><font size="2">85% to 89.9%</font></td>
                        <td><font size="2">25%</font></td>
                                    </tr>
                                                <tr>
                                 <td><font size="2">80% to 84.9%</font></td>
                        <td><font size="2">50%</font></td>
                   </tr>
                  <tr>
                        <td><font size="2">79.9% or below</font></td>
                        <td><font size="2">100%</font></td>
                  </tr>
                  </table>
                  </font>
                  <p>&nbsp;</p></td>
                  </tr>
            </table>
                </td>
       </tr>
   </table>
    </td>
    </tr>
</table>

Thank you in advance.


TrueBlueAsked:
Who is Participating?
 
LeviterConnect With a Mentor Commented:
The problem lies above the table definition.... You open a font-tag there, but the 'font' element is an inline element. As a result of this, you cannot put any block-level elements such as 'p' and 'table' in it. Remove the font-tag above the 'table' tag and you're safe.
0
 
Eternal_StudentCommented:
all font types/size/colors etc should be put in a css style and linked to the cell or table by class.
You have a lot of code here that could and should be put in css.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.