UO HTML - ćwiczenia 5 - Tabele

Tabele w HTML

Przykład 1. Prosta tabela

<table>
<tr><th>Imię</th><th>Nazwisko</th><th>Instrument</th></tr>
<tr><td>David</td><td>Gilmour</td><td>gitara</td></tr>
<tr><td>Nick</td><td>Mason</td><td>perkusja</td></tr>
<tr><td>Roger</td><td>Waters</td><td>bas</td></tr>
<tr><td>Richard</td><td>Wright</td><td>klawisze</td></tr>
</table>

Przykład 2. Tabela z tytułem i podziałem na sekcje

<table>
<caption>Skład zespołu Pink Floyd w latach 1968-1981</caption>
<thead>
<tr><th>Imię</th><th>Nazwisko</th><th>Instrument</th></tr>
</thead>
<tbody>
<tr><td>David</td><td>Gilmour</td><td>gitara</td></tr>
<tr><td>Nick</td><td>Mason</td><td>perkusja</td></tr>
<tr><td>Roger</td><td>Waters</td><td>bas</td></tr>
<tr><td>Richard</td><td>Wright</td><td>klawisze</td></tr>
</tbody>
</table>

Zadanie 1.

Do strony o pociagach dodaj tabelę podsumowującą parametry techniczne lokomotyw.

Style dla tabel

  • obramowanie tabeli
  • obramowanie komórek
  • własność border-collapse
  • padding komórek
  • wyrównanie tabeli na stronie
  • element col, formatowanie wybranych kolumn

Zadanie 2.

Sformatuj tabelę używając arkusza stylu CSS.

Scalanie komórek

  • atrybut colspan
  • atrybut rowspan

Kolejne możliwości CSS

Dynamiczna zmiana stylu dzięki "pseudoklasom"

:hover
element, nad którym znajduje się kursor myszki
:active
element, w który w danej chwili się klika
:link
nieodwiedzony odnośnik
:visited
odwiedzony odnośnik

Obraz tła

background-color
kolor tła
background-image
obrazek tła, np. background-image: url('mojetlo.jpg')
background-repeat
powtarzanie (lub nie) obrazka gdy jest mniejszy niż całe tło
background-attachment
przytwierdzenie lub przewijanie obrazka wraz ze stroną
background-position
położenie obrazka tła w dwóch wymiarach

Zadanie 3.

  1. Dodaj do strony o pociągach obrazek tła wzięty np. z tej strony, (skopiuj adres obrazka a nie obrazek).
  2. Niech komórka tabeli, nad którą jest kursor myszki, ma inny kolor tła.
  3. Niech nagłówek, w który się klika, ma czerwony kolor czcionki.

Zadanie 4. Zadanie domowe

  1. Dodaj do strony o historii HTML tabelę z kolejnymi wersjami HTML i datami (wystarczy rok) kiedy stały się standardami. Można dodać kolejne kolumny zgodnie w własnym pomysłem.
  2. Zastosuj w arkuszu stylu którąś z poznanych dzisiaj konstrukcji.
  3. Prześlij dokument HTML i arkusz stylu CSS mailem do prowadzącego: czarnik@mimuw.edu.pl do środy, 12 listopada.
Valid XHTML 1.1Valid CSS