Html Table

**mrhoo** · Feb 8 '08, 06:14 AM

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{posit ion:relative;mi n-width:400px;wid th:50%;float:le ft}

[CODE=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Table Floats</title>

<style type="text/css">
table{border:ri dge black 3px;background-color:white;fon t-size:1em;width: 90%}
td,th{border:so lid black 1px;padding:2px }
.sortableClass th{cursor:point er}
thead,tfoot{bac kground-color:#eee;font-size:1.1em;font-weight:bold;tex t-align:center}
.floatdiv{posit ion:relative;mi n-width:400px;wid th:50%;float:le ft}
</style>

</head>

<body>
<h1>HTML Elements</h1>

<div class="floatdiv ">
<table>
<caption>Thre e Column Table</caption>
<thead class="sortable Class">
<tr><th>Make</th><th>Model</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Ford</td><td>Truck</td><td>$23,000</td></tr>
<tr><td>Subar u</td><td>Wagon</td><td>$21,000</td></tr>
<tr><td>Kia</td><td>Compact</td><td>$13,000</td></tr>
<tr><td>Lexus </td><td>Sedan</td><td>$35,000</td></tr>
<tr><td>Honda </td><td>SUV</td><td>$26,000</td></tr>

</tbody>
</table>
</div>
<div class="floatdiv ">
<table>
<caption>Thre e Column Table</caption>
<thead class="sortable Class">
<tr><th>Make</th><th>Model</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Ford</td><td>Truck</td><td>$23,000</td></tr>
<tr><td>Subar u</td><td>Wagon</td><td>$21,000</td></tr>
<tr><td>Kia</td><td>Compact</td><td>$13,000</td></tr>
<tr><td>Lexus </td><td>Sedan</td><td>$35,000</td></tr>
<tr><td>Honda </td><td>SUV</td><td>$26,000</td></tr>

</tbody>
</table>
</div>

</body>
</html>[/CODE]

**mirianCalin** · Feb 8 '08, 06:43 AM

thanks for the reply!!
i'll try this when i get home and inform you with the result..
thanks again!!

**mirianCalin** · Feb 8 '08, 11:17 AM

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?

**just a feeling** · Feb 8 '08, 12:48 PM

Hi Mirian,

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

**Death Slaught** · Feb 8 '08, 01:13 PM

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

**tijivarghese** · Feb 8 '08, 01:49 PM

Originally posted by mirianCalin

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

Code:

<table align = "left">
<tr>
<td>Here is the 1st table</td>
</tr>
</table>

<table align = "left">
<tr>
<td>Here is the 2nd table</td>
</tr>
</table>

**mirianCalin** · Feb 8 '08, 01:50 PM

Originally posted by just a feeling

Hi Mirian,

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

Originally posted by Death Slaught

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!!

**mirianCalin** · Feb 8 '08, 01:52 PM

Originally posted by tijivarghese

Hi Buddy !
Its pretty simple.. all you have to do is to align both the tables to left ... ie

Code:

<table align = "left">
<tr>
<td>Here is the 1st table</td>
</tr>
</table>

<table align = "left">
<tr>
<td>Here is the 2nd table</td>
</tr>
</table>

thank you also for helping..
that (align = "left") was my problem.. hehe..
stupid me..

**Death Slaught** · Feb 8 '08, 02:30 PM

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

Html Table

Html Table

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment