Hallo

Ik ben nogal nietweten wat tables aangaat.

Ik probeer 9 kleine afbeelding langs en onder elkaar te zetten in tables (3x3).

Dit is zover gelukt, enig er zit te veel margin tussen rijen.

Graag zou ik de 9 afbeeldingen in 3 rijen (3x3) stak aan elkaar laten aansluiten.

Wat doe ik verkeerd ? Weet iemand raad ?

hier de code


<div id="container">

<center>

<tbody>
<tr>
<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;"title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

</tr>
<tr>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg"></a>
</td>

<td></td><td></td><td></td></tr></tbody>

</center>
</div>

Randjes om plaatjes kan je weghalen door border="0"
En in <table> kan je cellpadding, cellspacing etc nog erin zetten..


-------------------------


<div id="container">

<center>

<tbody>

<table>

<tr>
<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

</tr>
<tr>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

<td align="center" width="25%">
<a href="#"><img size="square" style="width: 80px; height: 80px; margin: 0px;" title="" src="preview.jpg" border="0"></a>
</td>

</tr>

</table>

</tbody>

</center>
</div>

In dit geval kan je het beste een <br /> tussen de regels toevoegen dat je op de volgende regel wilt hebben.
Uiteindelijk heb je dus 2x <br /> nodig om de 3x3 te krijgen.
De border om de images in FF zijn standaard blauw en in IE standaard wit. Als je de borders niet wilt hebben kan je in de css het volgende toevoegen img {border:none;}.

Gr,
Dogan.

Even een reset.css gebruiken, zou ik gewoon standaard doen als ik jou was..

http://meyerweb.com/eric/tools/css/reset/

Om antwoord te geven op je vragen, de browser geeft standaard een border aan een img mee als hier een <a> element omheen zit, ook tables worden standaard opgemaakt met cellspacing en cellpadding. D.m.v. een reset.css voorkom je dit en het werkt vaak fijner cross-browser ;-)

Dank jullie wel mensen, hiermee lukt het!

EDIT: NIET DUS

de cellspacing beheert toch de afstand van links naar rechts (horizontaal) tussen de tabellen,
niet verticaal ?

hmm, ergens moet ik toch een fout hebben lijkt me

ik vraag me af waarom je inline style gebruikt?

Het is veel handiger om gewoon een css in je document te maken of een externe css te gebruiken.
Zoals Robin zei, een reset css zal al helpen.

Gr, Roger

heb het ondertussen opgelost door de tables te vervangen door divjes.
dank jullie

komop, tables zijn zo 1992. Leer met divs werken!
Aanvullend bericht:
excuses, laatste post van rens niet gelezen. had blijkbaar wel gelijk :)

Origineel gepost door robinvb

komop, tables zijn zo 1992. Leer met divs werken!
Aanvullend bericht:
excuses, laatste post van rens niet gelezen. had blijkbaar wel gelijk :)

Tables zijn niet 1992, tables zijn om informatie overzichtelijk te tonen. Als je bedoelt, tables zijn niet om layouts op te bouwen, dan heb je inderdaad gelijk, maar tables is zeker geen oude (/overbodige) tag. Zie ook