Html tables please help!

K

Keeper

Honorary Master
Joined
Mar 29, 2008
Messages
23,628
Reaction score
52
Hey guys, im typing on a phone so excuse the grammar :)

I need to have 100 tables next to each other, but once one hits the end on th screen, it should automatically be dropped to the next line. I know it can.be done because ive done it before. Please help me with the code, im really having a problem with this basic problem...

Any ideas?
 
i'm not really understanding the scenario...
presumably these are stacked vertically?
not sure what you mean by "it should automatically be dropped to the next line"?
the next line of what?
 
100 tables? Planning an HTML wedding? Are you using relative (%) sizes, absolute sizes (px) or CSS sizes?
 
ah. so you want to set each table to be screen height...
you were probably doing it in quirks mode before and now you've defined a doctype.
i'll see if i can rustle up something for you.
are you using jquery?
 
here you go, no js, just css.
you could obviously kick the .tbl class and use table as a selector if there's no other tables on the page.
works in ff & ie8+
didn't check in ie6.

Code: 
<!doctype html>
<html>
<head>
<style>
html, body {
    height: 100%;
    margin: 0;
}
.tbl {
    height: 100%;
    background: red;
    border: 1px solid black;
    width: 100%;
}
</style>
</head>
<body>
<table class="tbl">
    <tr>
        <td>123
</table>
<table class="tbl">
    <tr>
        <td>123
</table>
<table class="tbl">
    <tr>
        <td>123
</table>
</body>
</html>
 
Last edited:
Ok, each table is say 200x200 pixels, if a user is ruuning 800x600, he should see 4 tables in one line, and the rest should stack below those... No horizontal scrollbar. If the user runs 1280x720, he should see 6 tables/cells per line. hope that clears it up.

It must work in IE.

Please dont give me advanced code, just simple html =D
 
Thanks for trying to help me murray, but those cells should sit next to each other untill it reaches the end of the screen, where they start again on a next line.

You can add images next to each other and it works, but when i use tables they always get created on a new line...



Think of word wrap in notepad.... Characters fall next to each other untill it reaches the end of the screen, and then continues on the next line... I need that but with cells instead of characters.
 
ah. i see.
table {float: left;}
and then clear the float with the element that comes after all of the tables.
or you could also try setting table {display: inline;}
 
Last edited:
Use style="float:left;" for the 100 tables.
or
Definein your stylesheet:
table
{
display: inline;
}

Tables are treated as block elements by default, you need to get them to be treated like inline elements, pictures are treated like inline elements.
 
Ok awesome, getting somewhere! It works in IE, but im trying to embed the site into a program using IE 4 controls.... any ideas to make it work for IE4 as well or am I stuffed here =(
 
I would do it this way, it might not be compliant, but it does work in the browsers Ive tested it in... Very basic and create your own stylesheet, I had to add this in one go, sorry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<STYLE type="text/css">
div { width:200px; float:left; background-color:#ededef}
</STYLE>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</td>
</tr>
</table>
</body>
</html>
 
Ok, i tried aligning ONLY the first table, works 100% now! Thanks dudes, i owe you guys!!!
 
Also remember, if you're going to make the blocks 200px wide, you can not expect it to fit all screen sizes, use % based sizes for the divs
 
Unihost said:
Also remember, if you're going to make the blocks 200px wide, you can not expect it to fit all screen sizes, use % based sizes for the divs
Click to expand...

If you read the whole thread you would've realized he doesn't NEED it to span the whole size. He needs them to be 200px squares, "spilling" over to a new line if there are more...
 
FarligOpptreden said:
If you read the whole thread you would've realized he doesn't NEED it to span the whole size. He needs them to be 200px squares, "spilling" over to a new line if there are more...
Click to expand...

If you read post 11, you'll see that my sample does exactly that. I just mentioned the mere fact. What I meant was that if you have a 15" screen, you might have a 122px gap to the right, if you have a 17" screen, you might have a 1px gap to the right. Oi.
 
Yep, that happens. is there any way to centre or space out the cells?

PS: thanx for your example, appreciate it.
 
Last edited:
Mmmmmm, I don't know - there may be a few guys more effective than me when it comes to that, but give each div a margin:3px or something in the stylesheet.
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X