Page 22 - Informatyka na czasie ZP1
P. 22
Rozdział 4. Strony WWW i grafika komputerowa
W zapisie użyto atrybutu border o wartości 1, odpowiedzialnego za
grubość linii obramowania tabeli. W liniach kodu 2–5 wprowadzono
pierwszy wiersz tabeli. Będzie to wiersz nagłówkowy, ponieważ użyto
znaczników <th> i </th> w liniach 3 i 4.
W komórkach tabeli można umieszczać dane dowolnego typu. Poza
tekstem mogą to być np. zdjęcia, listy, a nawet inne tabele.
Ćwiczenie 7
W pliku, który otrzymasz od nauczyciela (np. waluty.html), znajduje
się tabela. Zmień wartość atrybutu border i zaobserwuj zmiany.
Struktura tabeli może być bardziej rozbudowana. Sąsiednie komórki
Scalanie komórek tabeli można scalać zarówno w poziomie, jak i w pionie. Służą do tego
atrybuty colspan (scalanie w poziomie) i rowspan (scalanie w pionie),
których wartość wyraża liczbę scalonych sąsiednich komórek.
Wróćmy do tabeli z nazwami walut. Załóżmy, że chcemy scalić
komórki nagłówka tabeli i nadać scalonej komórce nazwę „Zapis walu
ty”. Aby to zrobić, należy w pierwszym wierszu tabeli umieścić kod:
<th colspan="2">Zapis waluty</th>
Wartość argumentu colspan określa liczbę komórek scalanych
w poziomie. Tabelę z walutami z rysunku 11.8 rozszerzymy o kolum
nę z nazwami kontynentów. Nazwy
kontynentów dodamy z lewej strony
tabeli (rys. 11.9). W dodanej kolumnie
„kontynent” łączymy trzecią i czwartą
komórkę. Atrybut rowspan z wartoś
cią 2 (ponieważ łączymy dwie komórki)
powinien znaleźć się w kodzie pierwszej Rys. 11.8. Efekt scalenia
scalo nej komórki. nagłówka tabeli
A to ciekawe
Jak wielki jest Układ Słoneczny?
Dave Grossman na swojej stronie internetowej zaprezentował
model Układu Słonecznego w postaci strony WWW.
Aby oddać proporcje odległości między planetami, autor
postanowił, że strona będzie zbudowana z gigantycznej tabeli
o wielu kolumnach. Kolumny te w większości wypełnia czarny
obraz o ustalonej szerokości i wysokości. W odpowiednich
miejscach wybrane kolumny tabeli przechowują ilustracje
planet. Stronę można znaleźć pod adresem:
http://www.phrenopolis.com/perspective/solarsystem/.
Warto sprawdzić, jak wygląda jej kod źródłowy.
178
