Spróbujemy teraz wykorzystać nabytą wiedzę
Wykorzystajmy listę nieuporządkowaną. Np. taką:
Przepis na szarlotkę:- Jabłka
- Mąka
- Cukier
- Cynamon
No fajnie..., ale ja bym chciał tak:
▶ Podglądponieważ w następnym kroku, chciałbym dodać po lewej zdjęcie szarlotki:
▶ PodglądEUREKA!, przecież możemy użyć tabeli!
Badając nową tabelę, łatwiej pracować nad kodem kiedy krawędzie tabeli są widoczne.
▶ PodglądZbudujmy taka tabelę. To naprawdę proste.
Rozpoczynamy od prostej, jednokomórkowej tabelki z Piotrem.
<table border="3">
<tr>
<td>Piotr</td>
</tr>
</table>
Zastąpmy Piotra przygotowaną listą nieuporządkowoaną.
<table border="3">
<tr>
<td>
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
W przypadku braku deklaracji atrybutu <width>, tabela będzie miała szerokość dostosowaną do zawartych w niej danych. Deklaracja atrybutu <width> nie jest więc potrzebna.
Rozszerzymy tabelę do całej szerokości okna przeglądarki.
<table border="3" width="50%">
<tr>
<td>
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
Super!
Teraz musimy zrobić drugą komórkę (na obrazek). Chcemy też aby lewa komórka była nieco węższa niż prawa.
<table border="3" width="50%">
<tr>
<td width="40%"></td>
<td width="60%">
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
To dobry moment na włożenie do lewej komórki tabeli obrazka applepie.gif. Pamiętajmy o wybraniu do niego poprawnej ścieżki dostępu.
Wprowadź obrazek do lewej komórki tabeli.
<table border="3" width="50%">
<tr>
<td width="40%">
<img src="applepie.gif" width="150" height="138" alt="szarlotka">
</td>
<td width="60%">
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
Wszystko co pozostało zrobić to dodanie atrybutu justującego obrazek do prawej strony komórki i pozbycie się widocznych krawędzi tabeli.
<table border="0" width="50%">
<tr>
<td width="40%" align="right">
<img src="applepie.gif" width="150" height="138" alt="szrlotka">
</td>
<td width="60%">
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
Bingo!