Need some quick HTML help. Should be easy!

brchcar1445

brchcar1445

Regular Member
Joined
Mar 28, 2008
Messages
394
Reaction score
594
I was hoping someone could help me with something real quick. I am trying to make a table on my site and use it as a category menu on my home page to navigate my different categories. I found a table that I really like, and it's working. But I need to figure out how to make one on the left and then another right next to it on the right? I can obviously make it go as low as I can, but how do I get 2 side by side? Here is the code I'm using.

<LEFT>
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</LEFT>

How do I get it to have it look like below.

Table - Table
Table - Table

Instead of just going..

Table
Table
Table
Table

Any help would be fantastic!
 
Advertise on BHW
Basically that table above side by side. So, pic table - pic table. And be able to go down the page like that. So...

Pic Table - Pic Table
Pic Table - Pic Table
Pic Table - Pic Table
Pic Table - Pic Table
 
here:
Code: 
<div style="float:left">
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</div>
<div>
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</div>
<div style="clear:both"></div>
<div style="float:left">
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</div>
<div>
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT">
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
<TR>
<TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD>
<TD><B>text text</B></TD>
</TR>
</TABLE>
</div>
 
You'd want to put one table as the 'wrapper' with 4 tables embeded... something like this (use whatever % you want for the outer table width):


Code: 
<table width="80%">
    <tr><td>
        <table width="50%">
            <tr><td>
                Content of top left table
            </td></tr>
        </table>
    </td>
        <table width="50%">
            <tr><td>
                Content of top right table
            </td></tr>
        </table>    
    </td></tr>
    <tr><td>
        <table width="50%">
            <tr><td>
                Content of bottom left table
            </td></tr>
        </table>
    </td>
        <table width="50%">
            <tr><td>
                Content of bottom right table
            </td></tr>
        </table>    
    </td></tr>    
</table>

Note: as far as the internal tables - You need to make sure you put enough content in them to keep the table from shrinking. Aka, if you have "width='50%" and only put a couple of words in the left table but a bunch of stuff in the right one, the right table can push past the 50% because the left one isn't using it's full space.

You can also do the above with fewer tables (using rows and columns) - you were asking about multiple tables so that's what I included.

Hope that helps,
OS
 
<tr>
<td><img src="row1-pic1"></td>
<td><img src="row1-pic2"></td>
</tr>
<tr>
<td><img src="row2-pic1"></td>
<td><img src="row2-pic2"></td>
</tr>
 
brchcar1445 said:
Basically that table above side by side. So, pic table - pic table. And be able to go down the page like that. So...

Pic Table - Pic Table
Pic Table - Pic Table
Pic Table - Pic Table
Pic Table - Pic Table
Click to expand...

I am not a pro but with your code times two I get the desired results;

Pic Table - Pic Table
Pic Table - Pic Table

HTML: 
<LEFT><TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT"><TR><TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD><TD><B>text text</B></TD></TR><TR><TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD><TD><B>text text</B></TD></TR></TABLE></LEFT>
<LEFT><TABLE BORDER="0" CELLSPACING="1" CELLPADDING="2" ALIGN="LEFT"><TR><TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD><TD><B>text text</B></TD></TR><TR><TD><IMG BORDER="0" WIDTH="nnn" HEIGHT="nnn" SRC="your.gif"></TD><TD><B>text text</B></TD></TR></TABLE></LEFT>

Or did I misunderstand something ?:P
 
You my friend, are amazing. Really appreciate it! Another reason to love the crap out of this site!
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top