[HTML/CSS] Wyrównanie tabel

[marb]

Co zrobić aby dwie małe tebelki na poniższym przykładzie nie były wyśrodkowane (względem wysokości) tylko trzymały się górnej krawędzi większej tebeli/strony?
Sposób pewnie jest banalny, ale ja niestety nie wiem jak to zrobić

Kod: Zaznacz cały

<table width="500" border="1"><tr><td width="150"><table border="1"><tr><td>tekst tekst tekst tekst</td></tr></table></td>
<td width="200"><table border="1"><tr><td>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </td></tr></table></td>
<td width="150"><table border="1"><tr><td>tekst tekst tekst tekst tekst tekst tekst tekst tekst </td></tr></table></td>
</tr></table>

[Hawk]

W znaczniku td wiekszej tabeli wpisz style="vertical-align: top".

[Stig]

Jeżeli interesuje Cię zgodność ze standardem HTML to wystarczy, że głównej tabeli nadasz HTML'owy atrybut valign o wartości top - przykład:

Kod: Zaznacz cały

<table width="500" border="1" valign="top">

Jeśli zaś chcesz pisać poprawniej i nowocześniej, czyli interesuje Cię zgodność ze standardem XHTML to dla każdej komórki tabeli głównej musisz nadać CSS'owy atrybut vertical-align o wartości top - przykład:

Kod: Zaznacz cały

<td width="150" style="vertical-align: top;">

BTW, ciekawi mnie czy ta tabela faktycznie służyć będzie do przeznaczonych dla niej celów (czytaj: do przekazywania danych tabelarycznych). Jeśli nie to IMHO najlepiej byłoby to zrobić korzystając z czterech elementów blokowych - przykład:

Kod: Zaznacz cały

<div style="width: 500px; border: 1px solid;">
 <div style="width: 148px; border: 1px solid; float: left;">tekst tekst tekst tekst</div>
 <div style="width: 198px; border: 1px solid; float: left;">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </div>
 <div style="width: 148px; border: 1px solid; float: left;">tekst tekst tekst tekst tekst tekst tekst tekst tekst </div>
</div>

EDIT: Najwyraźniej troszkę się spóźniłem

[marb]

Dzięki za pomoc. Rzeczywiście było proste. Już próbowałem użyć vertical-align: top; tylko wrzuciłem to do mniejszej tabeli i sie dziwiłem dlaczego nie działa . Tebela niestety nie jest wykorzystana zgodnie z jej przeznaczeniem tylko do konstrukcji strony ale divy to dla mnie nowość i nie mam teraz czasu żeby się uczyć ich wykorzystania, dlatego jeszcze stosuje tabele