tabellen naast elkaar

3 June 2010, 14:35

hey allemaal, ik heb dus meerdere tabellen met laten we zeggen een breedt en hoogte van 100px*100px

ik wil deze naast elkaar hebben staan, in plaats van eronder wat er nu gebeurt, Ik hoef geen reacties waarin staat dat ik opmaak beter met css of zonder tabellen moet doen, want dit wil ik iets anders.

het idee is dar er op een scherm met breedte 780px zeven rijen komen te staan en op een scherm van 800px acht rijen, dit zal dan automatisch door de browser ondersteund worden, wat dus betekent dat de site er zelfs zonder javascript css en images goed uit ziet.

Help is gevraagd

3 June 2010, 16:07

Zonder css gaat niet werken, want dat heb je keihard nodig om die tabellen naast elkaar te krijgen opdat ze zich aanpassen aan de breedte van het scherm.

Wat je doet is het volgende:
- Zet iedere tabel in een <div>
- Geef die divs het stijlkenmerk float: left; mee.
De tabellen gaan dan allemaal naast elkaar zitten en op het moment dat een rij vol is gaat 'ie naar de volgende.

Dus bijvoorbeeld:

HTML-code:

<div style="float:left;"><table><!-- inhoud van tabel --></table></div>

Mogelijk moet je het hele zaakje nog in een overkoepelende div zetten die je een width van 100% meegeeft.

Het alternatief is alle tabellen in een overkoepelende tabel zetten, maar dan ben je dus gebonden aan een vooraf bepaalde hoeveelheid kolommen, dus niet wat je zoekt.

3 June 2010, 19:50

Citaat:

Oorspronkelijk geplaatst door raoel2cool

het idee is dar er op een scherm met breedte 780px zeven rijen komen te staan en op een scherm van 800px acht rijen, dit zal dan automatisch door de browser ondersteund worden, wat dus betekent dat de site er zelfs zonder javascript css en images goed uit ziet.

Je wilt dus met een variabel aantal rijen (en kolommen?) gaan werken. De vraag is hoe je de afmetingen gaat opvragen en dan bepaalt hoeveel rijen/kolommen je gaat gebruiken. Daarvoor zal gerekend moeten worden; zonder javascript en/of php zie ik dat niet lukken.

3 June 2010, 19:55

Citaat:

Oorspronkelijk geplaatst door Obelix71

Daarvoor zal gerekend moeten worden; zonder javascript en/of php zie ik dat niet lukken.

Probeer dit maar eens:

HTML-code:

<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>
<body>

<div style="float:left; width:100px; height:100px; background-color:#06C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0FC;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#66C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6FC;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#60C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F0C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F6C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#06F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0FF;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#66F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6FF;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#60F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F0F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F6F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#066;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0F6;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#666;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6F6;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#606;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F06;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F66;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#060;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0F0;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#660;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6F0;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#600;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F00;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F60;">&nbsp;</div>

</body>
</html>

Werkt perfect, zonder gereken.

3 June 2010, 20:53

@FooBar: dat dat prima werkt, geloof ik direct.
TS geeft echter aan dat het aantal rijen (en kolommen?) afhankelijk is van de beeldschermbreedte (/-hoogte). Een variabel aantal dus. Gaat jouw code dan ook werken?

3 June 2010, 21:14

Ja, probeer het maar. Als je het browservenster kleiner maakt schuift alles direct door. En weer terug als je het venster weer vergroot.