By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Html Table

P: 35
hi to all..

is it possible to make a table beside another table?
because when i am making 2 tables, the second one is placed under the 1st one..

for example: *# represents the table*
~ i want this to happen
# #

but this is what happens
#
#
Feb 8 '08 #1
Share this Question
Share on Google+
9 Replies


100+
P: 428
Its simplest to show you,
but briefly, enclose each table in a floating div that has a width set to 50% and a min-width set to insure against a too small window.
In this example the divs have a class:

.floatdiv{position:relative;min-width:400px;width:50%;float:left}

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML Table Floats</title>
  6.  
  7. <style type="text/css">
  8. table{border:ridge black 3px;background-color:white;font-size:1em;width:90%}
  9. td,th{border:solid black 1px;padding:2px}
  10. .sortableClass    th{cursor:pointer}
  11. thead,tfoot{background-color:#eee;font-size:1.1em;font-weight:bold;text-align:center}
  12. .floatdiv{position:relative;min-width:400px;width:50%;float:left}
  13. </style>
  14.  
  15.  
  16. </head>
  17.  
  18. <body>
  19. <h1>HTML Elements</h1>
  20.  
  21. <div class="floatdiv">
  22. <table>
  23. <caption>Three Column Table</caption>
  24. <thead class="sortableClass">
  25. <tr><th>Make</th><th>Model</th><th>Price</th></tr>
  26. </thead>
  27. <tbody>
  28. <tr><td>Ford</td><td>Truck</td><td>$23,000</td></tr>
  29. <tr><td>Subaru</td><td>Wagon</td><td>$21,000</td></tr>
  30. <tr><td>Kia</td><td>Compact</td><td>$13,000</td></tr>
  31. <tr><td>Lexus</td><td>Sedan</td><td>$35,000</td></tr>
  32. <tr><td>Honda</td><td>SUV</td><td>$26,000</td></tr>
  33.  
  34. </tbody>
  35. </table>
  36. </div>
  37. <div class="floatdiv">
  38. <table>
  39. <caption>Three Column Table</caption>
  40. <thead class="sortableClass">
  41. <tr><th>Make</th><th>Model</th><th>Price</th></tr>
  42. </thead>
  43. <tbody>
  44. <tr><td>Ford</td><td>Truck</td><td>$23,000</td></tr>
  45. <tr><td>Subaru</td><td>Wagon</td><td>$21,000</td></tr>
  46. <tr><td>Kia</td><td>Compact</td><td>$13,000</td></tr>
  47. <tr><td>Lexus</td><td>Sedan</td><td>$35,000</td></tr>
  48. <tr><td>Honda</td><td>SUV</td><td>$26,000</td></tr>
  49.  
  50. </tbody>
  51. </table>
  52. </div>
  53.  
  54. </body>
  55. </html>
Feb 8 '08 #2

P: 35
thanks for the reply!!
i'll try this when i get home and inform you with the result..
thanks again!!
Feb 8 '08 #3

P: 35
i have already tried the code you've given me..
but the 2nd table is still under the 1st table,
what i want is for the 2nd table to be beside of the 1st table..
is what i want possible?
Feb 8 '08 #4

just a feeling
P: 87
Hi Mirian,

try this,
[HTML]<body>
<table align="left"><tr><td>Table 1, Row 1, Cell 1</td></tr></table>
<table><tr><td>Table 2, Row 1, Cell 1</td></tr></table>
</body>[/HTML]
Feb 8 '08 #5

Death Slaught
100+
P: 1,137
Try this.

[HTML] <html>

<head>
<style type="text/css">
#table {
float:left;
display:inline;
}
</style>
</head>

<body>

<table id="table">
<tr>
<td>
Text
</td>
</tr>
</table>

<table>
<tr>
<td>
Text
</td>
</tr>
</table>

</body>

</html>
[/HTML]

^_^ Hope it helps, Thanks, Death
Feb 8 '08 #6

P: 3
hi to all..

is it possible to make a table beside another table?
because when i am making 2 tables, the second one is placed under the 1st one..

for example: *# represents the table*
~ i want this to happen
# #

but this is what happens
#
#
Hi Buddy !
Its pretty simple.. all you have to do is to align both the tables to left ... ie
Expand|Select|Wrap|Line Numbers
  1. <table align = "left">
  2. <tr>
  3. <td>Here is the 1st table</td>
  4. </tr>
  5. </table>
  6.  
  7. <table align = "left">
  8. <tr>
  9. <td>Here is the 2nd table</td>
  10. </tr>
  11. </table>
Feb 8 '08 #7

P: 35
Hi Mirian,

try this,
[HTML]<body>
<table align="left"><tr><td>Table 1, Row 1, Cell 1</td></tr></table>
<table><tr><td>Table 2, Row 1, Cell 1</td></tr></table>
</body>[/HTML]
Try this.

[HTML] <html>

<head>
<style type="text/css">
#table {
float:left;
display:inline;
}
</style>
</head>

<body>

<table id="table">
<tr>
<td>
Text
</td>
</tr>
</table>

<table>
<tr>
<td>
Text
</td>
</tr>
</table>

</body>

</html>
[/HTML]

^_^ Hope it helps, Thanks, Death
hey, thanks for helping me!!
big help!!
Feb 8 '08 #8

P: 35
Hi Buddy !
Its pretty simple.. all you have to do is to align both the tables to left ... ie
Expand|Select|Wrap|Line Numbers
  1. <table align = "left">
  2. <tr>
  3. <td>Here is the 1st table</td>
  4. </tr>
  5. </table>
  6.  
  7. <table align = "left">
  8. <tr>
  9. <td>Here is the 2nd table</td>
  10. </tr>
  11. </table>
thank you also for helping..
that (align = "left") was my problem.. hehe..
stupid me..
Feb 8 '08 #9

Death Slaught
100+
P: 1,137
No problem. I would just like to point out that using the 'align' attribute isn't valid (unless you're using a transitional doctype), and that you should use CSS instead.

^_^ Thanks, Death
Feb 8 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.