Tabele (5)
Tomasz Bartuś
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:
|
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
ponieważ w następnym kroku, chciałbym dodać po lewej zdjęcie szarlotki:
 |
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
EUREKA!, przecież możemy użyć tabeli!
Badając nową tabelę, łatwiej pracować nad kodem kiedy krawędzie tabeli są widoczne.
|
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
Zbudujmy taka tabelę. To naprawdę proste.
Rozpoczynamy od prostej, jednokomórkowej tabelki z Piotrem.
<table border="3">
<tr>
<td>Ed</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>
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
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="100%">
<tr>
<td>
Przepis na szarlotkę:
<ul>
<li>Jabłka</li>
<li>Mąka</li>
<li>Cukier</li>
<li>Cynamon</li>
</ul>
</td>
</tr>
</table>
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
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="100%">
<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>
| |
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
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="100%">
<tr>
<td width="40%"><img src="applepie.gif" width="150" height="138"></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>
|
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
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="100%">
<tr>
<td width="40%" align="right"><img src="applepie.gif" width="150" height="138" /></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>
|
Przepis na szarlotkę:
- Jabłka
- Mąka
- Cukier
- Cynamon
|
Bingo!
