Table direct onder elkaar

[gebruiker78]

Hallo ik heb nu dit:
http://imageshack.us/photo/my-images/101/testdasd.png/

alleen vind ik de naam, woonplaats enzo ver van elkaar staan.
ik zou graag willen dat ze (zoals het slechte rode geanimeerde) komen te staan.
maar hoe doe ik dit want de code is zoiezo al heel gek (of het komt omdat ik een css noob ben)

<TABLE>
<TR>
<TD ROWSPAN="4"><img src="" height="100px;" width="100" ></img></TD>
<TD><?php echo $name; ?></TD>
</TR>
<TR>
<TD><?php echo $city; ?></TD>
</TR>
<TR>
<TD><?php echo $age; ?></TD>
</TR>
<TR>
<TD><?php echo $name; ?></TD>
</TR>
</TABLE>



zeg maar het is nu:
naam

woonplaats

geboorte datum

maar ik wil:
naam
woonplaats
geboorte datum

 

[csshunter]

Dan hoef je ze niet elk in een tabel-cel te zetten (die 4 cellen vullen samen de hoogte van de afbeelding op, dus elk heeft 1/4 van de hoogte; en de verticale uitlijning staat kennelijk op "middle").
Je kunt ze gewoon in één cel zetten, met een <br> om naar de volgende regel te gaan:

<table>
    <tr>
        <td>
            <img src="..." width="100" height="100" alt="">
        </td>
        <td>
            <?php echo $name; ?><br>
            <?php echo $city; ?><br>
            <?php echo $age; ?><br>
            <?php echo $name; ?>
        </td>
    </tr>
</table>

Maar je kunt ze ook in een <div> zetten:

<div class="friend">
    <img src="..." alt="">
    <p><?php echo $name; ?><br>
       <?php echo $city; ?><br>
       <?php echo $age; ?><br>
       <?php echo $name; ?></p>
    <div class="clearL"><!-- ! --></div>
</div>

Met als css iets als:

.friend {
    width: 250px;
    }
.friend img {
    width: 100px;
    height: 100px;
    float: left;
    }
.friend p {
    margin-left: 110px;
    }
.clearL {
    clear: left;
    }

Dat is één keer oppennen voor de css, en verder lekker korte en overzichtelijke html.

Met vriendelijke groet,
CSShunter