1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need some quick HTML help. Should be easy!

Discussion in 'Web Design' started by brchcar1445, Jun 2, 2013.

  1. brchcar1445

    brchcar1445 Regular Member

    Joined:
    Mar 28, 2008
    Messages:
    393
    Likes Received:
    582
    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!
     
  2. Feather

    Feather Registered Member

    Joined:
    Apr 17, 2013
    Messages:
    75
    Likes Received:
    20
    Occupation:
    Student (High School)
    Location:
    Sweden
    So you want:

    [Pic]
    [Pic]
    ?
     
    • Thanks Thanks x 1
  3. brchcar1445

    brchcar1445 Regular Member

    Joined:
    Mar 28, 2008
    Messages:
    393
    Likes Received:
    582
    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
     
  4. mrblackjack

    mrblackjack Jr. VIP Jr. VIP Premium Member

    Joined:
    Dec 6, 2011
    Messages:
    960
    Likes Received:
    553
    Occupation:
    I live alone, I work alone, I make money alone
    Location:
    G00gle LaNd
    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>
    
    
    
     
    • Thanks Thanks x 1
  5. OldSalt

    OldSalt Moderator Staff Member Moderator Jr. VIP Premium Member

    Joined:
    May 19, 2009
    Messages:
    1,279
    Likes Received:
    7,437
    Gender:
    Male
    Occupation:
    IT Sys Admin
    Location:
    US, East Coast
    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
     
  6. Pois0n

    Pois0n Regular Member

    Joined:
    Jun 20, 2012
    Messages:
    412
    Likes Received:
    234
    Location:
    Canada
    <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>
     
  7. Feather

    Feather Registered Member

    Joined:
    Apr 17, 2013
    Messages:
    75
    Likes Received:
    20
    Occupation:
    Student (High School)
    Location:
    Sweden
    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
     
  8. brchcar1445

    brchcar1445 Regular Member

    Joined:
    Mar 28, 2008
    Messages:
    393
    Likes Received:
    582
    You my friend, are amazing. Really appreciate it! Another reason to love the crap out of this site!