How do I make table beside another table?

  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Philippines

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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)
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Philippines

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

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.
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Philippines

Post 3+ Months Ago

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
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

<link rel...> ties the stylesheet to the page making it usable throughout the page.
  • Silvertongue62
  • Novice
  • Novice
  • User avatar
  • Posts: 31

Post 3+ Months Ago

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
  • Posts: 11

Post 3+ Months Ago

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
  • Posts: 11

Post 3+ Months Ago

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: monica660 and 53 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.