i've uploaded what i have so far to my site so you can better see what i am talking about.

http://gfxgrounds.com/index2.html

In the table for Latest Tutorials the code is set up as so
html:

    <div id="latesttutorials">
        <table cellpadding="0" cellspacing="0">
            <tr>
                 <td colspan="11" id="latesttutstop"></td>
            </tr>
            <tr>
                <td id="latesttutsleft"></td>
                <td id="tutspace">
                    <a href="#">
                        <img src="http://www.webmaster-talk.com/images/home/tutspace.gif" border="0" />
                    </a>
                </td>
                <td id="latesttutsdiv"></td>
                <td id="tutspace">
                    <a href="#">
                        <img src="http://www.webmaster-talk.com/images/home/tutspace.gif" border="0" />
                    </a>
                </td>
                <td id="latesttutsdiv"></td>
                <td id="tutspace">
                    <a href="#">
                        <img src="http://www.webmaster-talk.com/images/home/tutspace.gif" border="0" />
                    </a>
                </td>
                <td id="latesttutsdiv"></td>
                <td id="tutspace">
                    <a href="#">
                        <img src="http://www.webmaster-talk.com/images/home/tutspace.gif" border="0" />
                    </a>
                </td>
                <td id="latesttutsdiv"></td>
                <td id="tutspace">
                    <a href="#">
                        <img src="http://www.webmaster-talk.com/images/home/tutspace.gif" border="0" />
                    </a>
                </td>
                <td id="latesttutsright"></td>
            </tr>
            <tr>
                <td colspan="11" id="latesttutsbottom"></td>
            </tr>
        </table>
    </div>

CSS:

#latesttutorials {float:left;
    width:670px;
    height:200px;
    margin-top:20px;
    margin-left:10px;
}

#latesttutstop {width:670px;
    height:56px;
    background-image:url(images/home/latesttutshead.gif);
    background-repeat:no-repeat;
}

#latesttutsleft {width:10px;
    height:125px;
    background-image:url(images/home/latesttutsleft.gif);
    background-repeat:no-repeat;
}

#tutspace {width:125px;
    height:125px;
}

#latesttutsdiv {width:6px;
    height:120px;
    background-color:#eae9e7;
}

#latesttutsright {background-image:url(images/home/latesttutsright.gif);
    width:11px;
    height:25px;
    background-repeat:no-repeat;
}

#latesttutsbottom {width:670px;
    height:18px;
    background-image:url(images/home/latesttutsbottom.gif);
    background-repeat:no-repeat;
}

now if you go to my page you can see the table and you can see that the bottom peice is disconnected and spaced down from the rest of it. I am unsure as to how I can fix this.

i deleted the table and redid it with divs and it works now

Good. You don't need tables for layout anyway