How do I make table beside another table?

  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 21st, 2010, 5:20 am

Example:

[Table] [Table]
[Data ] [Data ]
[Data ] [Data ]
[Data ] [Data ]


Sorry, I don't know how to draw it here.

You see a set of 2 table and space between them, and they must be inline, how can I do that in HTML and/or CSS?

Thank You!!!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 21st, 2010, 5:20 am

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post October 21st, 2010, 6:28 pm

Is it tabular data or are you trying to do a layout? If its a layout then I highly suggest you learn CSS if its tabular data you can nest an HTML table inside the cell of another table by repeating the <table> tag in your code.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post October 21st, 2010, 6:40 pm

HTML Code: [ Select ]
<table>
    <tr>
        <td>
            Content
        </td>
        <td>
            Content
        </td>
    </tr>
    <tr>
        <td>
            Content
        </td>
        <td>
            Content
        </td>
    </tr>
</table>
  1. <table>
  2.     <tr>
  3.         <td>
  4.             Content
  5.         </td>
  6.         <td>
  7.             Content
  8.         </td>
  9.     </tr>
  10.     <tr>
  11.         <td>
  12.             Content
  13.         </td>
  14.         <td>
  15.             Content
  16.         </td>
  17.     </tr>
  18. </table>


Is that what you mean? (I think that's how you do it... Has being a while since I worked with tables)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 21st, 2010, 11:00 pm

No, I mean they are separated, just like with this website, you see 1st table is here(Posting table(position:left;width:0.875 or 7/8)), and 2nd is just like in the right of this(Table menus(position: right;width:0.125% or 1/8): Favorite Links, Share This Page, Sponsored Links table, etc.)
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post October 21st, 2010, 11:06 pm

This is a style/layout and CSS/DIVS are used instead of tables. It could be accomplished with tables, but CSS/DIVS are better IMO.

float: left; is the culprit... it makes the divs go side by side creating 2 or more columns.

[EDIT] Check out this tutorial... this is what you want to do.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 21st, 2010, 11:43 pm

Thanks Bogey, that's what I looking for. But I as a newbie, it's still a little complicated to me and never used <div>, I just started studying HTML and CSS half a week. But I'll try my best to understand that tutorial. Anyway what is <link rel> for?

Thank You So Much, That's really a big Help!!!
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post October 22nd, 2010, 8:19 am

<link rel...> ties the stylesheet to the page making it usable throughout the page.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Silvertongue62
  • Novice
  • Novice
  • User avatar
  • Joined: Dec 30, 2010
  • Posts: 31
  • Status: Offline

Post December 31st, 2010, 10:29 am

Jan Jeremy Go wrote:
Example:

[Table] [Table]
[Data ] [Data ]
[Data ] [Data ]
[Data ] [Data ]


Sorry, I don't know how to draw it here.

You see a set of 2 table and space between them, and they must be inline, how can I do that in HTML and/or CSS?

Thank You!!!



Not sure what you are asking but let me give it a try.

Try this:
Code: [ Select ]
<table border="4" cellspacing="2" cellpadding="2" width="100%">

<tr>
    <td>Left Space</td>
    <td>Right Space</td>
</tr>
<tr>
    <td>Next Level data Left</td>
    <td>Next Level data Right</td>
</tr>
<tr>
    <td>Level below previous left</td>
    <td>Level below previous right</td>
</tr>
<tr>
    <td>Level below previous Left</td>
    <td>Level below previous Right</td>
</tr>
</table>
  1. <table border="4" cellspacing="2" cellpadding="2" width="100%">
  2. <tr>
  3.     <td>Left Space</td>
  4.     <td>Right Space</td>
  5. </tr>
  6. <tr>
  7.     <td>Next Level data Left</td>
  8.     <td>Next Level data Right</td>
  9. </tr>
  10. <tr>
  11.     <td>Level below previous left</td>
  12.     <td>Level below previous right</td>
  13. </tr>
  14. <tr>
  15.     <td>Level below previous Left</td>
  16.     <td>Level below previous Right</td>
  17. </tr>
  18. </table>


First line determines what your table will look like and everything else is just the space inside of those parameters. If you dont want the tables to have borders change to 0 or delete. Next it will be how far apart you want your spaces from each other. Its very simple. Last is how large would you like the table. I hope this helps.
  • vikasgautam
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jan 19, 2011
  • Posts: 11
  • Status: Offline

Post January 19th, 2011, 11:05 pm

you can simply make this table for one use one column <td >
and for the other you can use other or easily create the table like this

or in other way you create two different table then by using the properties of the css you can align the table one after other in line simply use align="right" or align="left"

or can adjust it by giving margin
  • BestTechnology
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jan 27, 2011
  • Posts: 11
  • Status: Offline

Post January 27th, 2011, 11:36 pm

Bogey wrote:
This is a style/layout and CSS/DIVS are used instead of tables. It could be accomplished with tables, but CSS/DIVS are better IMO.

float: left; is the culprit... it makes the divs go side by side creating 2 or more columns.

[EDIT] Check out this tutorial... this is what you want to do.



Agree go with Divs instead of tables.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: roelof and 166 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.