21

Why can't <p> be nested inside <table>? What is the correction I could make? Removing the <div> and <p> tags corrupt my design. As the website follows a client provided design.

I have the following code and it works fine in VS2008, but I get warnings:

Code

<div class="right_articles">
    <p>
        <table>
            <tr>
                <td>
                    <img alt="Img not found" src="images/ribbon.gif" style="width: 155px; height: 125px;" />
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
        </table> 
    </p>
    <p>&nbsp;</p>
    <p>
        <table>
            <tr>
                <td>
                    <img alt="Img not found" src="images/medal.gif" style="width: 155px; height: 125px;" />
                </td>
                <td>          
                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label><br />
                    <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label><br />
                    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>      
                </td>
            </tr>
        </table>
    </p>
</div>

Warnings

Warning 1 This end tag has no matching start tag.
    E:\WebSite4\test.master 121 

Warning 2 Validation (XHTML 1.0 Transitional): 
    Text is not allowed between the opening and closing tags for element html'. 
    E:\WebSite4\test.master 5 

Warning 3 Validation (XHTML 1.0 Transitional): 
    Element 'form' is missing its closing tag.  
    E:\WebSite4\test.master 21 

Warning 4 The class or CssClass value is not defined. 
    E:\WebSite4\test.master 33 

Warning 5 File 'spacer.gif' was not found. 
    E:\WebSite4\test.master 116 

Warning 7 Validation (XHTML 1.0 Transitional): 
    Element 'img' is missing required attribute 'alt'. 
    E:\WebSite4\test.master 116 

Warning 8 Validation (XHTML 1.0 Transitional): 
    Element 'table' cannot be nested within element 'p'.
    E:\WebSite4\test.master 78 

Warning 9 Validation (XHTML 1.0 Transitional): 
    Element 'table' cannot be nested within element 'p'.
    E:\WebSite4\test.master 93
ruffin
  • 16,507
  • 9
  • 88
  • 138
Rohit Vipin Mathews
  • 11,629
  • 15
  • 57
  • 112

2 Answers2

42

In HTML it's important to understand that P elements cannot contain other block level elements and TABLE is a block level element. The P closing tag is optional and when you try to make a P element contain something that it cannot contain, the closing P tag is assumed by the browser.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Tim Schmelter
  • 450,073
  • 74
  • 686
  • 939
  • 4
    @Rohit: Why can't you use a `div` instead of a `paragraph`, in other words, why do you need it at all since there's already `div`? You could control the layout by your `right_articles` class, couldn't you? – Tim Schmelter Apr 10 '12 at 11:14
  • The

    is the part of design i got. It had only an image as inside it. But i require a table.

     – Rohit Vipin Mathews Apr 10 '12 at 11:30
3

In answer to your actual question a paragraph cannot contain any other block elements, which includes tables. Also in addition to this the closing </p> tag is optional so the first closing tag that is subsequently found by the parser will deem to have closed the paragraph.

It would help if I could see more of the code and layout, however I believe that removing the <p> tags from around the tables and then correctly formatting the positioning of your tables using CSS should achieve your results.

<div class="right_articles">
            <table>
            <tr>
            <td>
                <img alt="Img not found" src="images/ribbon.gif"                     
                    style="width: 155px; height: 125px;" />
            </td>
            <td>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            </td>
            </tr>
            </table>
            <p>&nbsp;</p>
            <table>
            <tr>
            <td>
                <img alt="Img not found" src="images/medal.gif"                     
                    style="width: 155px; height: 125px;" />
            </td>
            <td>          
                <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label><br />
                <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label><br />
                <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>      
            </td>
            </tr>
            </table>
        </div>
DigiDamsel
  • 106
  • 6