CODEWITHSUNDEEP
htmlcssasp.net
user3519261
user3519261

Reputation: 79

html table not formatted correctly

I'm trying to format this HTML so it looks like this: http://iforce.co.nz/i/tryvopws.4xy.png

I can't seem to get it right though! I can make the top part work but then the other sides resize to be really small. I want it to look like the picture.

Any help is appreciated!

<table cellspacing="0" border="0" width="100%">
      <tr class="s4-die">
       <td class="ms-pagebreadcrumb">
       </td>
        <td valign="top" width="100%">
               <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="WebPartZone1" Title="loc:Top" />
               &#160;
        </td>
      </tr>
      <tr>
        <td>
         <table width="100%" cellpadding="0" cellspacing="0" style="padding: 5px 10px 10px 10px;">
          <tr>
           <td valign="top" width="60%">
               <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Left" Title="loc:Left" />
               &#160;
           </td>
           <td>&#160;</td>
           <td valign="top" width="40%">
               <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Right" Title="loc:Right" />
               &#160;
           </td>
           <td>&#160;</td>
          </tr>
          <tr>
          <td valign="top" width="60%">
               <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Left2" Title="loc:Left" />
               &#160;
           </td>
           <td>&#160;</td>
           <td valign="top" width="40%">
               <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="Right2" Title="loc:Right" />
               &#160;
           </td>
           <td>&#160;</td>
          </tr>
         </table>
        </td>
      </tr>
    </table>

Upvotes: 0

Views: 946

Answers (2)

John Satterfield
John Satterfield

Reputation: 1

The first row you need to add colspan="2" so that it spans the full length as shown in your example.

Also you wouldn't need to add another table in that table. That is causing your one td to be larger than the other and may look very messy. using the colspan , cellspacing , and cellpadding you should be able to accomplish what you need.

Upvotes: 0

sjm
sjm

Reputation: 5468

You have and extra column remove that 

 <td class="ms-pagebreadcrumb">
 </td>

or turn it into a row

 <tr class="s4-die">
   <td class="ms-pagebreadcrumb">
   </td>
 </tr>
 <tr class="s4-die">
     <td valign="top" width="100%">

Upvotes: 1

Related Questions