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>
Piotr

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!

 

 
 

Wykłady:

 
 

1. Sieci komputerowe

 
 
1.1 Pojęcia podstawowe
 
1.2. Internet - historia i współczesność
 
1.3. Rodzaje sieci
 

2. HTML 5.0

 
 
2.1. HTML - konwencje
 
2.2. Kod minimalny dokumentów .html
 
2.3. Znaki diakrytyczne i metainformacje
 
2.4. Podstawowe tagi
 
2.5. Formatowania tekstu
 
2.6. Obrazy
 
2.7. Odnośniki
 
2.8. Listy
 
2.9. Tabele
 

3. CSS

 
 
3.1. CSS - konwencje
 
3.2. Kolory
 
3.3. Tła
 
3.4. Model pudełkowy
 
3.5. Krawędzie
 
3.6. Marginesy
 
3.7. Dopełnienia
 
3.8. Wysokość i szerokość
 
3.9. Tekst
 
3.10. Czcionki
 
3.11. Opływanie
 
3.12. Technika zagnieżdżonych bloków, Display
 

4. Dodatki

 
 
4.1. Publikacja stron www
 
4.2. Grafika
 
4.3. Walidacja dokumentów
 
4.4. Linux (1)
 

Ćwiczenia:

Zakładanie kont


Tabele:

1  2  3  4  5  6
 

Ramki:

1  2  3  4  5  6  7
 
 

CSS: