HTML Help Forum

Two Tables Side By Side

Discuss any HTML troubles including forms, tables, and frames.

Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 12:53 am

Log in or Register to see link?

im trying to get these two tables side by side, they are already but i want to raise the text from the rite table. i did a search and looked at like 30 sites and couldnt get any to work. the closest i got was to just put align:left in the first table, i tried nesting a couple times but nothing worked. these are the original tables. telling me to do this or that probably isnt gonna help ive tried it so many times, if someone could please put them together

Log in or Register to see link

Code: Select all
<table width="399px" align="center" cellspacing="0">
<tr>
<td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">
<font size=2>
<b>

You Can See All Of The Nooks Pics By Thumbnail Here

</b>

</font>
</td>
<td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">



</td>
</tr>
<td width="25%" class="menutable" style="padding-left:10px;">
<font size=1>
<b>

<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6087"><font color="#00138E">Female Celebs A Thru M</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7719"><font color="#00138E">Female Celebs N Thru Z</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6497"><font color="#00138E">Evan Rachel Wood</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7093"><font color="#00138E">Emma Roberts</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8110"><font color="#00138E">Jamie Lynn Spears</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=5356"><font color="#00138E">Mary Kate And Ashley Olsen</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7142"><font color="#00138E">Natalie Portman</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7239"><font color="#00138E">Rachel Bilson</font></a><br/>

</b>
</font>
</td>
<td width="25%" class="menutable" style="padding-left:10px;">
<font size=1>
<b>

<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7874"><font color="#00138E">Mischa Barton</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?action=display&board=archives&thread=7977"><font color="#00138E">Lindsay And Ali Lohan</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7991"><font color="#00138E">Kristen Stewart</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8000"><font color="#00138E">Emily Osment</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8047"><font color="#00138E">Ashley Tisdale</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8090"><font color="#00138E">Dakota And Elle Fanning</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8148"><font color="#00138E">Emma Watson</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8197"><font color="#00138E">Vicki Justice</font></a><br/>


</b>
</font>
</td>
</tr>
</table>


Code: Select all
<table width="399px" align="center" cellspacing="0">
<tr>
<td width="50%" class="menutable" vAlign="top">
<font size=2>
<center>
<b>

I Updated Alot Of Pics In All The Featured Celebs From Past Years, Check Them Out In Either Their Boards Or Their Archives

</b>
</center>
</font>
</td>
<td width="50%" class="menutable" vAlign="top">
<font size=2>
<center>
<b>

Please Vote For The Nook At The Sites On The Bottom Of The Page. It Takes A Second

</b>
</center>
</font>
</td>
</tr>
</table>


and this what that row was if i screwed anything up

Code: Select all
<table width="798px" align="center" cellspacing="0">
<tr>
<td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">
<font size=2>
<b>
<u>

You Can See All Of The Nooks Pics By Thumbnail Here

</u>
</b>
</font>
</td>
<td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">



</td>
</tr>
<td width="25%" class="menutable" style="padding-left:10px;">
<font size=1>
<b>

<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6087" target="_blank"><font color="#00138E">Female Celebs A Thru M</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7719" target="_blank"><font color="#00138E">Female Celebs N Thru Z</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6497" target="_blank"><font color="#00138E">Evan Rachel Wood</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7093" target="_blank"><font color="#00138E">Emma Roberts</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8110" target="_blank"><font color="#00138E">Jamie Lynn Spears</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=5356" target="_blank"><font color="#00138E">Mary Kate And Ashley Olsen</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7142" target="_blank"><font color="#00138E">Natalie Portman</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7239" target="_blank"><font color="#00138E">Rachel Bilson</font></a><br/>

</b>
</font>
</td>
<td width="25%" class="menutable" style="padding-left:10px;">
<font size=1>
<b>

<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7874" target="_blank"><font color="#00138E">Mischa Barton</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?action=display&board=archives&thread=7977" target="_blank"><font color="#00138E">Lindsay And Ali Lohan</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7991" target="_blank"><font color="#00138E">Kristen Stewart</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8000" target="_blank"><font color="#00138E">Emily Osment</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8047" target="_blank"><font color="#00138E">Ashley Tisdale</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8090" target="_blank"><font color="#00138E">Dakota And Elle Fanning</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8148" target="_blank"><font color="#00138E">Emma Watson</font></a><br/>
<a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8197" target="_blank"><font color="#00138E">Vicki Justice</font></a><br/>

</b>
</font>
</td>
<td width="25%" class="menutable" vAlign="top">
<font size=2>
<center>
<b>

I Updated Alot Of Pics In All The Featured Celebs From Past Years, Check Them Out In Either Their Boards Or Their Archives

</b>
</center>
</font>
</td>
<td width="25%" class="menutable" vAlign="top">
<font size=2>
<center>
<b>

Please Vote For The Nook At The Sites On The Bottom Of The Page. It Takes A Second

</b>
</center>
</font>
</td>
</tr>
</table>
Last edited by tunescool on Sat Jun 04, 2011 10:30 am, edited 1 time in total.
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sat Jun 04, 2011 6:02 am

You can put the tables inside a div container and float the tables.
Some minor changes made for appearance.

The css:
Code: Select all
div.box {
   width:798px;
   overflow:hidden;
}
.box-left {
   width:399px;
   float:left;
}
.box-right {
   width:399px;
   float:right;
}


The html:
Code: Select all
<div class="box">
    <table class="box-left" align="center" cellspacing="0">
    <tr>
    <td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">
    <font size=2>
    <b>
    You Can See All Of The Nooks Pics By Thumbnail Here
    </b>
    </font>
    </td>
    <td width="50%" class="menutable" colspan="2" vAlign="top" style="padding-left:10px;">
    </td>
    </tr>
    <td width="25%" class="menutable" style="padding-left:10px;">
    <font size=1>
    <b>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6087"><font color="#00138E">Female Celebs A Thru M</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7719"><font color="#00138E">Female Celebs N Thru Z</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=6497"><font color="#00138E">Evan Rachel Wood</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7093"><font color="#00138E">Emma Roberts</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8110"><font color="#00138E">Jamie Lynn Spears</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=5356"><font color="#00138E">Mary Kate And Ashley Olsen</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7142"><font color="#00138E">Natalie Portman</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7239"><font color="#00138E">Rachel Bilson</font></a><br/>
    </b>
    </font>
    </td>
    <td width="25%" class="menutable" style="padding-left:10px;">
    <font size=1>
    <b>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7874"><font color="#00138E">Mischa Barton</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?action=display&board=archives&thread=7977"><font color="#00138E">Lindsay And Ali Lohan</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=7991"><font color="#00138E">Kristen Stewart</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8000"><font color="#00138E">Emily Osment</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8047"><font color="#00138E">Ashley Tisdale</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8090"><font color="#00138E">Dakota And Elle Fanning</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8148"><font color="#00138E">Emma Watson</font></a><br/>
    <a href="http://celebnook.proboards.com/index.cgi?board=archives&action=display&thread=8197"><font color="#00138E">Vicki Justice</font></a><br/>
    </b>
    </font>
    </td>
    </tr>
    </table>
    <table id="box-right" align="center" cellspacing="5">
    <tr>
    <td width="50%" class="menutable" vAlign="top">
    <font size=2>
    <b>I Updated Alot Of Pics In All The Featured Celebs From Past Years, Check Them Out In Either Their Boards Or Their Archives</b>
    </font>
    </td>
    <td width="50%" class="menutable" vAlign="top">
    <font size=2>
    <b>Please Vote For The Nook At The Sites On The Bottom Of The Page. It Takes A Second</b>
    </font>
    </td>
    </tr>
    </table>
</div>
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 8:53 am

well i ended up with this
Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sat Jun 04, 2011 10:05 am

That is god-awful coding. There is no doctype which will put browsers in quirks mode (meaning they will display it how they want to.
Javascripts and all css go in the head section, not the body. Scripts and css can and should be contained in external files and linked to from each page.

In the code where you inserted the code I gave you, see these lines
Code: Select all
</table>
</td>

</tr>
    <div class="box">

Delete the closing </td> and closing </tr> so it will look like this
Code: Select all
</table>
    <div class="box">


That should solve that problem.
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 10:29 am

yea that did it, im definitely not a coder, somedays i recognize easy stuff and somedays i dont. i do have the css in my headers. but after i just deleted those two things the contents of the left table shifted over to the left and the cell above the links doesnt span the two cells with the links in them.

Log in or Register to see linkLog in or Register to see link

Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sat Jun 04, 2011 11:06 am

Here's what I did to get the text to span the two columns and also create some space.
Code: Select all
div.box {
width:798px;
margin:20px 0 10px 0;
overflow:hidden;
}
.box-left {
width:399px;
float:left;
white-space:nowrap;
border-collapse:collapse;
}
.box-right {
width:399px;
float:right;
border-collapse:collapse;
}
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 11:26 am

thanks sticks i appreciate your help, i usually get help every week or whatever on proboards support but im having some html problems theyre not helping with. now theres extra space between the menu links row and the two tables, and the bottom of the tables

and i would think the text in the two tables would line up exactly on the top, that is what i was trying to do. shouldnt it just line up now that the tables are

Log in or Register to see link

Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sat Jun 04, 2011 11:48 am

Look at the html code for the right table. I added some cellspacing to keep the text from running together. To get the left table to line up, cellspacing won't do it so add padding to the top td of the left table.
Code: Select all
<table class="box-left" align="center" cellspacing="0">
        <tr>
        <td width="50%" class="menutable" colspan="2" vAlign="top" style="padding:5px 0 0 10px;">
        <font size=2>
        <b>
        You Can See All Of The Nooks Pics By Thumbnail Here

if this creates too much space below the menu, reduce the margin on the box div.
Code: Select all
div.box {
width:798px;
margin:15px 0 10px 0;
overflow:hidden;
}


To get the bottom table on the page to have less space at the top, remove some of the <br /> tags before the table starts.
Code: Select all
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table width="804px" class="bordercolor" cellspacing="1" align="center"><tr><td class="table" style="background-image: url(http://i709.photobucket.com/albums/ww95/tunescool/nook/grey12.jpg );" align="center">
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 3:51 pm

i had to adjust it but it looks good and the text is lined up, thank you, proboards however an easier forum for me and im just stuck with ive invested so much time and coding in is really screwed up alot of the time. im working on everything that is screwed up and i want my table perfect

what i was talking about the space on the bottom was this, it used to look like this, i put all those brs in there cause i hate looking at those ads

Log in or Register to see link Log in or Register to see link

Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sat Jun 04, 2011 8:28 pm

Just increase the box div bottom margin
margin:15px 0 10px 0; (top, right, bottom, left)
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sat Jun 04, 2011 8:52 pm

seriously thanks, they wouldnt help me on proboards.everything is the way i want it, i know its what you do, but thanks, thats what i came here for

i thought i could do it but i cant get the text aligned back with the menu links on the left and the rite

Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sun Jun 05, 2011 7:13 am

In the box div see the box-left table td's that have the class name menutable. Each one has left padding applied with an inline style.
For the first instance of td class menutable the padding is like
Code: Select all
style="padding:5px 0 0 10px;"

This means padding is 5px top, 0px right, 0px bottom and 10px left.
Adjust the left padding to either 7 or 8px, whichever will re-align the text to the left to match the links.
Do the same for the next two instances
Code: Select all
style="padding-left:10px;"

Do not adjust the padding on the last td in this table.

The styles should look like this when your done
Code: Select all
style="padding:5px 0 0 8px;"

and

style="padding-left:8px;"
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sun Jun 05, 2011 10:07 am

how can i get the rite side aligned

Log in or Register to see link
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Re: Two Tables Side By Side

Postby sticks464 » Sun Jun 05, 2011 8:54 pm

Try adding this style.
Code: Select all
.box-right td {padding-left:5px;}
sticks464
Site Admin
 
Posts: 3875
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.

Re: Two Tables Side By Side

Postby tunescool » Sun Jun 05, 2011 9:42 pm

i cant seem to get it to work
tunescool
 
Posts: 27
Joined: Tue May 24, 2011 7:37 am

Next

Return to General HTML

Who is online

Users browsing this forum: No registered users and 3 guests