How to set up layouts?

W

winston2020

New Member
I've recently started a personal project designing a simple blog site. The emphasis will be mainly on security and cross-browser compatibility, which are two things I've had very little practice with.
To that end, I've designed a blog post, however it's written entirely with tables, and I've noticed alignment issues between browsers as well as when scaling the page.
Unfortunately the site is localhost only at the moment, but I've included the code below. Could someone please suggest a cleaner way to achieve this look? Perhaps there's a nice css way to do it (I'm a bit of a css newbie).

Code: 
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>

            <td width="29"><img src="http://localhost/images/tl.jpe" /></td>
            <td height="29" background="http://localhost/images/top.jpe"><!-- TOP, EMPTY DATA--></td>
            <td width="29"><img src="http://localhost/images/tr.jpe" /></td>
          </tr>
          <tr>
            <td width="29" background="http://localhost/images/left.jpe"><!-- LEFT SIDE, EMPTY DATA --></td>
            <td valign="top">

            <!-- USER POST TABLE -->
            <table cellpadding="0" cellspacing="0" width="100%" border="0">

            <tr>
            	<td width="80" valign="top">  <!-- AVATAR DATA -->
              	<img src="images/winston2020.jpg" width="60" height="60" border="2" />
              <!-- END AVATAR DATA -->

              
            	</td>

            	<td>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>

                  		<td>
                    	<!-- BLOG TABLE -->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td>

                            <!-- BLOG POST TITLE --><strong><div id="title_87">Hello!</div></strong>                           
                            <!-- END BLOG POST TITLE -->
                            </td>
                            <td align="right" width="85">

                            <!-- EDIT COMMANDS -->    
                            <!-- END EDIT COMMANDS -->
                            </td>
                          </tr>
                          <tr>

                          	<td colspan="2">
                          	<!-- AUTHOR AND DATE --><em><font size="2">Wednesday, November 17, 2010 | 01:36 AM | by winston2020</font></em>                          	
                          	<!-- END AUTHOR AND DATE -->
                          	</td>

                          </tr>
                          <tr>
                            <td colspan="2">
                            <!-- BLOG POST DATA --><br/><div id="content_87">Why, hello!</div>                            
                            <!-- END BLOG POST DATA -->

                            </td>                            
                          </tr>
                        </table>
                        <!-- END BLOG TABLE -->

                    </td>                   
                  </tr>
                </table>
                </td>
                <td width="80" valign="top" align="left">

                </td>
                </tr>
                </table>
            <!-- END USER POST TABLE-->

            </td>
            <td width="29" background="http://localhost/images/right.jpe"><!-- RIGHT SIDE, EMPTY DATA --></td>
          </tr>
          <tr>

            <td width="29"><img src="http://localhost/images/bl.jpe" /></td>
            <td background="http://localhost/images/bottom.jpe"><!-- BOTTOM, EMPTY DATA --></td>
            <td width="29"><img src="http://localhost/images/br.jpe" /></td>
          </tr>
        </table>
 
smoovo

smoovo

New Member
To know how to build a professional layout you need to learn to use divs and CSS. So you got Lou's link and try to Google more sources.
 
You must log in or register to reply here.
Top