Trochę wstępu
Dawno, dawno temu, za siedmioma górami, za siedmioma lasami żył sobie internet. No i ten internet to był bardzo młody i taki hmmm… Nie wiedział za wiele. Brak mu było doświadczenia. Ciężko mu było zdefiniować się. Powstawały w tym czasie przeglądarki. Oczywiście każda musiała obowiązkowo mieć własne standardy i własną interpretację pewnych zdarzeń, znaczników itp. No i zapanował chaos wśród stron internetowych. I wtedy głos jednego przemówił, i tak oto rzekł:
- Zrobimy przeglądarki graficzne!
I chór się podniósł i wszyscy zgodnie wiwatowali. Niedługo jednak potem zaczęły powstawać problemy – jak organizować dane na stronach… I byli wśród nich starzy i młodzi, mędrcy oraz głupy takie, że o matko polskie społeczeństwo dni dzisiejszych by się nie powstydziło. Niemniej jednak były to burzliwe czasy. Jeden z mędrców powiedział – ZRÓBMY RAMKI! I tak też się stało, zaczęto budować strony internetowe które przypominały … Na pewno nie dzisiejsze portale. Powiem tylko, że co ładniejsze strony wyglądały naprawdę nieźle. Ale ciężko było organizować dane w ramkach. I widzieli ludzie, że ramki były brzydkie. Wtem jeden z nich, szlachetny Mietek z Mietkowa rzekł:
- Od dziś, żaden informatyk nie użyje ramki, która będzie wrogiem jego, która będzie wirusy zagnieżdżać na jego witrynach, a informatyk zniszczy ramkę i nikt już nie poważy się jej użyć. W zamian informatyk pochyli się przed tabelą i to ją miłować będzie od dziś aż po wsze czasy.
Tak też się stało, ale nie do końca.
Tabela - dobra praktyka dawnych lat
Tabeli używano tak jak i dziś, do przedstawiania wyników, do robienia zestawień, czy też cenników na stronach internetowych. Z czasem jednak tabele zaczęły przybierać na znaczeniu jako dobre kontenery użytkowe do gromadzenia treści. Przykład ten obrazuje poniższy fragment kodu:
<!-- przyklad_7_1.html -->
<html>
<head>
<title>Przyklad 1 rozdział 7.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1">
<tr><td>-</td><td>1</td><td>2</td><td>3</td></tr> <!-- Wiersz pierwszy -->
<tr><td>1</td><td>1;1</td><td>1;2</td><td>1;3</td></tr> <!-- Wiersz drugi -->
<tr><td>2</td><td>2;1</td><td>2;2</td><td>2;3</td></tr> <!-- Wiersz trzeci -->
<tr><td>3</td><td>3;1</td><td>3;2</td><td>3;3</td></tr> <!-- Wiersz czwarty -->
</table>
</body>
</html>
Powyższy przykład ukazuje samą idee tabelki. Tabelka jak każda inna, czyż nie ? Jeśli jeszcze tego nie widzisz, odpal powyższy przykład. Czas, aby poznać części składowe tego oto tworu.
- <table> </table> - Początek i koniec całego ciała tabeli. Może posiadać różne atrybuty, takie jak wysokość etc. Tabela składa się z wierszy.
- <tr> </tr> - Początek i koniec danego wiersza. Może posiadać różne atrybuty. Elementem wiersza może być tylko komórka.
- <td> </td> - Początek i koniec komórki. Komórka jako cząstka elementarna (podstawowa) tabeli może także posiadać różne atrybuty. W niej umieszcza się tekst, wideo, obrazki, etc.
Atrybuty dodatkowe:
- <table border=”x”> – border określa grubość (px) obramowania tabeli (ang border - obramowanie).
- <table align=”x”> – align określa to, w jakiej pozycji ma być tabelka względem strony tj. wyrównana do: lewej, środka, prawej(left, center, right).
- <table cellspacing=”x”> – ten atrybut określa odstępy między kolejnymi komórkami (ang. cell - komórka ; space - miejsce).
- <table cellpadding=”x”> – atrybut określa padding (odstęp wewnętrzny) od krawędzi w komórkach tabeli.
- <table width=”x”> – width (ang. width – szerokość) jest to atrybut, przyjmujący wartość w pixelach. Ustala szerokość tabeli.
- <table height=”x”> – width (ang. height – wysokość) jest to atrybut, przyjmujący wartość j/w. Ustala wysokość tabeli.
- <table bgcolor=”x”> – bgcolor (ang. background – tło) ustala kolor tła tabeli. Wartość może zostać podana w języku angielskim lub w trybie szesnastkowym (http://lmgtfy.com/?q=Tester+kolor%C3%B3w+hex - pierwszy link).
- <td colspan=”x”> – col (ang. column -kolumna) span (ang. span – rozpiętość). Rozpiętość kolumny. x jest tu ilością komórek scalonych w jednym WIERSZU.
- <td rowspan=”x”> – row (ang. row – wiersz). Rozpiętość wierszy. X jest tu ilością komórek scalonych w danej KOLUMNIE
Przykłady zastosowania:
1. Tabela wyników rozgrywek ligi mistrzów:
<!-- przyklad_7_2.html -->
<html>
<head>
<title>Liga mistrzów</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" align="center" bgcolor="yellow">
<tr><td>Lp.</td><td>T1</td><td>T2</td><td>W</td><td>PKT</td></tr> <!-- Wiersz pierwszy -->
<tr><td>1</td><td>ManU</td><td>Real Madryt</td><td>3:1</td><td>2</td></tr> <!-- Wiersz drugi -->
<tr><td>2</td><td>Chelsea</td><td>FC Barcelona</td><td>2:3</td><td>2</td></tr> <!-- Wiersz trzeci -->
<tr><td>3</td><td>Bayern Munch</td><td>FC Porto</td><td>3;3</td><td>1</td></tr> <!-- Wiersz czwarty -->
</table>
</body>
</html>
2. Tabela z indeksu
<!-- przyklad_7_3.html -->
<html>
<head>
<title>Tabela z indeksu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" width="800">
<tr><td colspan="5"> Semestr I </td></tr>
<tr><td rowspan="2" width="200">Imię i Nazwisko</td><td rowspan="2" width="100">Podpis</td><td colspan="3" width="500">Wyniki</td></tr>
<tr><td width="166">Zal.</td><td width="166">Egz.</td><td width="166">XYZ.</td></tr>
<tr><td>mgr. Wojciech Burczymucha</td><td></td><td>4</td><td></td><td></td></tr>
<tr><td>dr. Paweł Kiszczał</td><td></td><td></td><td>5</td><td></td></tr>
<tr><td>prof. Stasiek Ogórski</td><td></td><td></td><td></td><td>3.5</td></tr>
</table>
</body>
</html>
3. Jakaś strona internetowa
<!-- przyklad_7_4.html -->
<html>
<head>
<title>Szablon strony internetowej</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" width="1024" height="700" align="center">
<tr><td colspan="3" height="200"> BANNER </td></tr>
<tr><td width="262">MENU</td><td width="500">ŚRODEK STRONY</td><td width="262">MENU</td></tr>
<tr><td colspan="3" height="20">STOPA</td></tr>
</table>
</body>
</html>
Praca domowa:
- Na podstawie informacji z tego rozdziału oraz z rozdziałów poprzednich spróbuj zaprojektować stronę internetową portalu z informacjami sportowymi. (lub jakiegokolwiek innego)
- Zrób tabelę o takich atrybutach:
-
Pierwszy wiersz – jedna komórka
- Drugi wiersz 2 komórki, z czego ostatnia składa się z 4 komórek, dwóch w pionie 2 w poziomie
- Trzeci wiersz – dwie komórki z czego pierwsza składa się z 2 komórek w poziomie a druga pochodzi z poprzedniego punktu.
- Czwarty wiersz – cztery komórki z czego pierwsza z komórek składa się z dwóch w pionie.
- Szerokość tabeli: 800
- Wysokość tabeli: 440
- Kolor tła: czerwony
- Grubość obramowania: 3
- Każda komórka powinna zawierać jedno dowolne słowo
- Słowo powinno być w odległości 2 px od krawędzi każdej komórki
- Tabela powinna być wycentrowana
- Przeczytaj artykuł ponownie :)