CSS advice

[Wilfred1]

I have made changes to my header template and it works how ever it looks a bit like a dog's breakfast so as I am trying to learn about css can anyone advise how I can make the following portion of my header template more efficient - thanks!

<a name="top"></a>
<table  style="background: url(../forum/images/header_bg.gif)" border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td align="left" rowspan="2"><a href=""><img src="../forum/images/header_left.gif" width="300" height="81" border="0" alt="$vboptions[bbtitle]" /></a></td>
        <td width="50%" align="center" valign="bottom" rowspan="2">
            <img style="vertical-align: bottom;" src="../forum/images/img1.jpg" alt="site logo">
        </td>
        <td style="padding-top:3px; color:#ffffff; font: bold 11px Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif;" width="50%" align="right">
            <if condition="$show['member']">

                <!-- header top links -->
                <span style="color:#ffffff; text-decoration:none;padding-right:15px;"><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></span>

                <if condition="$show['notifications']">
                    <span id="notifications" style="padding-right:15px;"><a style="color:#ffffff; text-decoration:none;" href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span>
                    <if condition="$show['popups']">
                        <script type="text/javascript"> vBmenu.register("notifications"); </script>
                    <else />
                        <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                        <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
                    </if>
                <else />
                    <if condition="$show['pmmainlink']"><a style="color:#ffffff; text-decoration:none;padding-right:15px;" href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></if>
                </if>
        
                <a style="padding-right:15px; color:#ffffff; text-decoration:none;" href="$vboptions[bburl]/login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a>
                <!-- header top links -->

            <else />

                <!-- login form -->
                <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
                <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
                <table style="padding-top:3px;" cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
                <tr>
                    <td style="white-space: nowrap;color:#ffffff; font: bold 11px Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif;"><label for="navbar_username">$vbphrase[username]</label></td>
                    <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
                    <td style="white-space: nowrap;color:#ffffff; font: bold 11px Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif;"><label for="navbar_password">$vbphrase[password]</label></td>
                    <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
                    <td style="white-space: nowrap;color:#ffffff; font: bold 11px Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif;" nowrap="nowrap"><label for="cb_cookieuser_navbar">
                        <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked />$vbphrase[remember_me]</label>
                    </td>
                    <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
                </tr>
                </table>
                <input type="hidden" name="s" value="$session[sessionhash]" />
                <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
                <input type="hidden" name="do" value="login" />
                <input type="hidden" name="vb_login_md5password" />
                <input type="hidden" name="vb_login_md5password_utf" />
                </form>
                <!-- / login form -->

            </if>
        </td>

        <td align="right" rowspan="2"><img src="../forum/images/header_right.gif" width="7" height="81" border="0" alt="site right" /></td>
    </tr>
    <tr>
        <td width="50%" align="center" valign="bottom">
            <img style="vertical-align:bottom;" src="../forum/images/img2.jpg" alt="img2">
        </td>
    </tr>
</table>

[Hell Bomb]

Here are a few of my bookmarks which should help you out, I hope they help.

http://www.communitymx.com/content/a...F55&print=true

http://www.chromaticsites.com/blog/1...ebsite-design/