HTML - Table - 3 naar 4

[gast0163]

Ik word langzaam steeds gekker!!!

Ik probeer een makkelijke site in elkaar te gooien. Heb een tekening van iemand gekregen, in stukken geknipt en deze wil ik invullen in een tabel.

Bovenste rij, 3 afbeeldingen.
Onderste rij, 4 afbeeldingen.

Maar om 1 of andere rede lukt mij dit niet?!?!

[ ][ ][ ][ ]
[ ][ ][ ] <<< zo moet het er simpelweg uit komen te zien. Maar het verschuift, bezig geweest met colspan, width, etc. Geen succes.

Rij 1
cel1 = 78x200
cel2 = 78x242
cel3 = 78x280
cel4 = 78x278

Rij 2
cel1 = 472x406
cel2 = 472x388
cel3 = 472x206

Iemand?!

 

[flitsflitsflits]

Tabellen gebruiken om de layout in op te trekken is niet slim en ook het forceren van een bepaalde breedte/hoogte van een site (en dus ook de diverse onderdelen) is niet handig omdat niet elke gebruiker dezelfde instellingen gebruikt.

Waarom het niet lukt: een tabel is gemaakt om kolommen en rijen weer te geven. Met colspan en rowspan kun je meerdere kolommen en rijen samentrekken, maar binnen de tabel zal toch een rechte lijn ontstaan. Bij jou is de breedte van elke kolom anders. Je zult dus een extra tabel moeten bijmaken: een tabel in een tabel. Bijvoorbeeld:

<table cellspacing='0' cellpadding='0'>
	<tr>
		<td>
			<table cellspacing='0' cellpadding='0'>
				<tr style='height:78px;'>
					<td style='width:200px;background-color:red;'></td>
					<td style='width:242px;background-color:yellow;'></td>
					<td style='width:280px;background-color:green;'></td>
					<td style='width:278px;background-color:pink;'></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table cellspacing='0' cellpadding='0'>
				<tr style='height:472px;'>
					<td style='width:406px;background-color:red;'></td>
					<td style='width:388px;background-color:yellow;'></td>
					<td style='width:206px;background-color:green;'></td>
				</tr>
			</table>
		<td>
	</tr>
</table>

Als je hetzelfde effect wilt bereiken met div'jes kan dat ook:

<div style='width:200px;height:78px;background-color:red;float:left'></div>
<div style='width:242px;height:78px;background-color:yellow;float:left'></div>
<div style='width:280px;height:78px;background-color:green;float:left'></div>
<div style='width:278px;height:78px;background-color:pink;float:left'></div>
<div style='clear:both'></div>
<div style='width:406px;height:472px;background-color:red;float:left'></div>
<div style='width:388px;height:472px;background-color:yellow;float:left'></div>
<div style='width:206px;height:472px;background-color:green;float:left'></div>

Maar ook dat heeft in dit geval weinig zin omdat je nog steeds alle maten opdringt aan de bezoeker.

p.s. let niet op de kleuren, die gebruik ik alleen maar om te zien wat ik aan het doen ben