Hoi Evert,
Ook wil ik toch nog wel weten hoe ik specifiek die tabel goed krijg zoals beschreven in mijn vraag.
Aha! Nou krijg ik door de <table class="main"> het angstige voorgevoel dat je van plan bent er nog meer tables in te gaan zetten voor de layout, en waarschijnlijk geneste tables. Of geneste tables in geneste tables...
Maar:
tabellen voor de opmaak zijn "EVIL". :evil:
Waarom? Tabellen lijken makkelijk, omdat ze zich aanpassen aan de inhoud. Maar daarin zit meteen het grote gevaar: ze gaan een eigen leven leiden en je hebt niet meer in de hand wat ze gaan doen. Behalve dat, tabellen (en tabellen in tabellen, en tabellen in tabellen in tabellen) zorgen voor een knetterende milieuvervuiling in je html: overal <tr>'s en <td>'s, vaak lege <tr>'s en <td>'s om de tabel maar vol te krijgen, en je raakt kompleet de weg kwijt als je later ergens iets wilt veranderen. Als tabelcellen gevuld worden met een achtergrond-figuur, kan het erg fout gaan als de tabelcel "uit zichzelf" hoger of breder wordt. Het geeft ook nog echte milieuvervuiling. Al die extra html-code moet over internet geblazen worden, en dat kost energie voor de servers en voor je pc thuis die alles op het scherm moet zien te krijgen. Het kost ook nog extra tijd voor downloaden: je pagina wordt er trager door. Tabellen zijn ook star: als de ene kolom/rij hoger wordt, worden de andere dat ook, en het is maar de vraag of je dat wilt.
CSS voor de opmaak is veel flexibeler: door gebruik als apart stylesheet geeft CSS korte en zuivere html-code (in plaats van dat je in elke pagina opnieuw die tabel [in tabel [in tabel] enz.] moet hangen), en spaart aan alle kanten energie (ook die van jou als je later iets gaat veranderen). :love:
Na dit inleidend pleidooi (dat tegelijk ook mijn conclusie is
) gaan we eens kijken wat er nu met je tabel aan de hand is.
Ik heb exact je maatvoering aangehouden, maar de kleurtjes wat aangepast om alles duidelijker te kunnen zien, en er een maatlatje in gezet dat niets aan de opmaak verandert.
Eerst de breedte
De tabel heb je op 100% breed gezet, dus schermbreed-vullend. Daarmee loop je het risico dat er niets van je opgegeven kolombreedtes overblijft!
- De kolommen worden smaller dan opgegeven, als de resolutie van de monitor die de bezoeker van de pagina gebruikt, te laag is voor de pagina-opmaak.
- Bij 100% tabelbreedte gaat een tabel namelijk de ruimte in de kolommen "eerlijk verdelen", want dat is het kenmerk van een tabel
- Bij minder totale breedte dan de optelsom van de kolombreedtes wordt alles wat geen "harde inhoud" heeft (zoals het paddenstoelplaatje met echte vaste breedte) ... afgeknaagd. Er komt géén horizontale scrollbar!
Probeer maar eens testpagina 1 op een resolutie van 1024x768px (die nog heel veel gebruikt wordt) of lager.
- Dit is testpagina 2.
- Hier is het plaatje kleiner gemaakt, en nu gaat het wel goed. - Voor elke resolutie kan je een "kritische breedte" van het plaatje (=van de content-kolom) uitrekenen. Bij 1024x768 is het (rekening houdend met een rechter scrollbar) in de buurt van de 575px. Maar:
- Dit is testpagina 3.
- Als je de content deze 575px breedte geeft, is ie alleen op 1024x768px resolutie exact. Bij 1280x1024px wordt de resterende breedte (naar verhouding) uitgesmeerd over de 4 kolommen. En bij 800x600px wordt er weer afgekalfd.
Nu de hoogte
Volgens de css-regels is een hoogte in procenten: het opgegeven percentage ten opzichte van het omsluitend element. Heeft dat omsluitend element géén opgegeven hoogte, dan gebruikt een tabel het "auto"-mechanisme = dan wordt de hoogte net zo hoog als nodig is voor de inhoud van de hoogste cel van de tabel.
Eén niveau hoger in de html-hiërarchie dan de <table> zit de <body>, die geen opgegeven hoogte had. Dat moet dus worden:
body { height: 100%; }.
Nu heeft wel de <body> een hoogte die doorwerkt op de tabelhoogte, maar ...
- Dit is testpagina 4.
- Er gebeurt nog steeds niets. De <body> heeft op zijn/haar beurt een hoogte in % t.o.v. het omsluitende element van de <body>. Dat is de <html>, die in hoogte onbepaald was. Die moet dus ook de 100% hoogte krijgen.
- Dit is testpagina 5 met 100% height voor html, body en table.
Met vriendelijke groet,
CSShunter
)
