CSS Forum

**airattack111** · 07-18-2009, 07:49 PM

I'm doing a website for someone, I created the template in photoshop, sliced it up, and there is one big white table that I need to put my content in. I'm wondering what I should do to organize the content going in it? The main white area is one table, the 2 blue sides are tables with a repeating background. I'm just trying to find out the best way to be able to organize the content I'll be putting in.

http://s50556.gridserver.com/

**LadynRed** · 07-18-2009, 08:09 PM

If you're doing this from scratch, why not do it WITHOUT tables, step into the 21st century of web design and use CSS

**JeremyMiller** · 07-18-2009, 09:26 PM

I'm not sure what you mean by "organize the content going in it", but it is worth pointing out, as LadyNRed has, that tables should not be used for layouts. Now, you're using DreamWeaver (most likely), so you're probably not a coder, but a designer. Generally speaking, designers shouldn't try to code and coders should try to design. It just has bad effects.

Call me bored, but these types of questions come up all the time, so I wanted to take a minute or 2 on this one since the layout is so elementary and demonstrate the difference.

Your code:

HTML Code:

<html>
<head>
<title>Hershey's Ice Cream</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
body {
margin: 0px;
padding: 0px;
background-image: url(bg.png);
background-repeat: repeat-x; 
}
</STYLE>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#033fab" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/User_05_roll.png','images/User_06_roll.png','images/User_07_roll.png','images/User_08_roll.png','images/User_09_roll.png','images/User_03_roll.png')">
<!-- Save for Web Slices (hersheysicecream.psd) -->
<table align="center" id="Table_01" width="940" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="9"><img src="images/index_01.png" width="940" height="109" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/index_02.png" width="833" height="1" alt=""></td>
        <td colspan="2" rowspan="2"><a href="/about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','images/User_03_roll.png',1)"><img src="images/index_03.png" name="Image23" width="107" height="51" border="0"></a></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/index_04.png" width="293" height="101" alt=""></td>
        <td><a href="/icecream" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/User_05_roll.png',1)"><img src="images/index_05.png" name="Image18" width="118" height="50" border="0"></a></td>
        <td><a href="/cookies" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/User_06_roll.png',1)"><img src="images/index_06.png" name="Image19" width="110" height="50" border="0"></a></td>
        <td><a href="/cakes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/User_07_roll.png',1)"><img src="images/index_07.png" name="Image20" width="96" height="50" border="0"></a></td>
        <td><a href="/catering" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','images/User_08_roll.png',1)"><img src="images/index_08.png" name="Image21" width="101" height="50" border="0"></a></td>
        <td><a href="/locations" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/User_09_roll.png',1)"><img src="images/index_09.png" name="Image22" width="115" height="50" border="0"></a></td>
    </tr>
    <tr>
        <td colspan="7" background="images/index_10.png" width="647" height="51" alt=""></td>
    </tr>
    <tr>
        <td background="images/index_11.png" width="8" height="311" alt=""></td>
        <td colspan="7" background="images/index_12.png" width="926" height="311" alt=""></td>
        <td background="images/index_13.png" width="6" height="311" alt=""></td>
    </tr>
    <tr>
        <td colspan="9" background="images/index_14.png" width="940" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="9" background="images/index_15.png" width="940" height="55" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="285" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="118" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="110" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="96" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="101" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="115" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="101" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

versus code created by a programmer:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hershey's Ice Cream</title>
    <style type="text/css">
      body {
        margin:0;
        text-align:center;
        background:#10187a;
      }
      #page_body {
        width:940px;
        margin:0 auto 0 auto;
        text-align:left;
      }
      #navigation {
        background:#f00;
      }
      #navigation img {
        float:left;
      }
      #navigation a {
        padding-top:50px;
        height:0px;
        overflow:hidden;
        float:left;
        color:transparent;
      }
      #nav_ice_cream {
        width:110px;
        background:no-repeat url('http://s50556.gridserver.com/images/index_05.png');
      }
      #nav_ice_cream:hover {
        background:no-repeat url('http://s50556.gridserver.com/images/User_05_roll.png');
      }
      #nav_cookies {
        width:110px;
        background:no-repeat url('http://s50556.gridserver.com/images/index_06.png');
      }
      #nav_cakes {
        width:96px;
        background:no-repeat url('http://s50556.gridserver.com/images/index_07.png');
      }
      #nav_spacer {
        height:50px;
        width:8px;
        float:left;
        background:no-repeat url('http://s50556.gridserver.com/images/index_08.png');
      }
      #nav_catering {
        width:101px;
        background:no-repeat url('http://s50556.gridserver.com/images/index_08.png');
      }
      #nav_locations {
        width:115px;
        background:no-repeat url('http://s50556.gridserver.com/images/index_09.png');
      }
      #nav_about_us {
        height:51px;
        width:107px;
        background:no-repeat 0px -1px url('http://s50556.gridserver.com/images/index_03.png');
      }
      #body_wrapper {
        width:940px;
        background:#fff url('http://s50556.gridserver.com/images/index_10.png') repeat-y top right;
      }
      #body_container {
        display:inline-block;
        width:918px;
        border-left:6px #89abec solid;
        border-right:6px #89abec solid;
        padding:0 5px 0 5px;
      }
      #footer_bottom {
        height:55px;
        width:940px;
        background:#f00;
      }
    </style>
  </head>
  <body>
    <div id="page_body">
      <div id="header"><img src="http://s50556.gridserver.com/images/index_01.png" /></div>
      <div id="body_wrapper">
        <div id="navigation">
          <img src="http://s50556.gridserver.com/images/index_04.png" />
          <a href="" id="nav_ice_cream">Ice Cream</a>
          <a href="" id="nav_cookies">Cookies</a>
          <a href="" id="nav_cakes">Cakes</a>
          <div id="nav_spacer"></div>
          <a href="" id="nav_catering">Catering</a>
          <a href="" id="nav_locations">Locations</a>
          <a href="" id="nav_about_us">About Us</a>
        </div>
        <div id="body_container">
          <p>Page Content Goes Here</p>
        </div>
        <br style="clear:both;display:block;" />
      </div>
      <div id="footer_top"><img src="http://s50556.gridserver.com/images/index_14.png" height="23" width="940"/></div>
      <div id="footer_bottom"></div>
    </div>
  </body>
</html>

A few advantages of the second code segment:

Javascript is not required.
No images are needed for spacing (the spacer wouldn't be really needed either, but I was sticking to your images ).
Links are given text (I didn't bother adding in alt's for the IMG tags, but one ought to do that), so the site is better indexed in search engines.
Design and content are kept separate, so editing either is easier.
Fewer characters are needed: 2362 (3,364 bytes) compared against 4283 (4,833 bytes) and it would be less if absolute URLs weren't used (2014 characters and 3,016 bytes).
Style being kept separate from layout means less bandwidth usage and more effective usage of the browser cache.
Users of assistive technologies are more easily able to "view" and navigate your site.

So, if you're going to be building pages, you can see that there are some significant advantages to "doing it right" as opposed to "doing it with tables."

**JeremyMiller** · 07-18-2009, 09:38 PM

Just had to say that I bet LadyNRed, who's far better at CSS than I, could write this up even cleaner!

**konetch** · 07-19-2009, 07:11 AM

Quote:

Originally Posted by JeremyMiller

Generally speaking, designers shouldn't try to code and coders should try to design. It just has bad effects.

I don't think that is exactly true. A lot of people can code, design, and program. They just learn how to do all three, but they may be better at one than another.

**wayfarer07** · 07-19-2009, 02:35 PM

Quote:

Originally Posted by konetch

I don't think that is exactly true. A lot of people can code, design, and program. They just learn how to do all three, but they may be better at one than another.

I think I agree, though most people tend to be better at one area. It's not very often that you find someone that is both highly creative and artistic, but also logical and problem solving. It's not that they don't exist, but it's not normal.

I can hack together a design if I have to, and have the results looking good, but I still would never place myself amongst truly talented designers that do only that. The thing I'm best with is code, it's what I go to sleep thinking about at night.

Of course, coding HTML and CSS does not require the same type of problem solving skills as say, engineering a database driven web application with a user base, so I think it's fair to say designers should learn as much as they can about HTML and CSS so they don't make poor design choices, even if they eventually hand the "mundane" task of coding the client-side stuff to someone else.

**JeremyMiller** · 07-19-2009, 06:34 PM

Quote:

Originally Posted by JeremyMiller

Generally speaking, designers shouldn't try to code and coders should try to design. It just has bad effects.

I couched my words carefully.

I'd add that I have never used a designer's HTML/CSS layout when putting the site live. I always request their graphic template so that I can rework it into something which is clean and efficient, taking into account as much SEO as I know along with support for those using assistive technologies.