Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Tabele proste

Prostą tabelę utworzymy przy pomocy kilku znaczników. Zadajmy sobie napierw proste pytanie: jak zbudowana jest tabela? Prosty rysunek to wyjaśni:

Tabela
Rysunek 2_5_1_1. Budowa prostej tabeli
W tabeli możemy wyróżnić poziome wiersze oraz pionowe kolumny. Przecięcia wierszy i kolumn wyznaczają elementarne obszary tabeli - komórki. Pierwszy wiersz tabeli nazywa się wierszem nagłówkowym lub nagłówkiem. W bardziej rozbudowanych tabelach można spotkać kilka wierszy nagłówkowych, dlatego czasami lepiej jest mówić o wierszach stałych tzn. takich w których wpisany tekst jest stały - nie jest zależny od różnych wartości wprowadzanych danych. W wielu programach komputerowych operujących tabelami, te wiersze podczas przewijania tabeli pozostają nieruchome. Patrząc w ten sam sposób, można również zdefiniować stałe kolumny. W naszym przykładzie pierwsza kolumna jest stała. Niektóre komórki mogą być ze sobą połączone - mówimy wtedy o komórkach scalonych. W tabeli pokazanej na rysunku nie ma komórek scalonych.

Struktura tabeli

					
<table>
  <tr>
    <td>Pierwsza komórka pierwszego wiersza (pierwsza komórka tabeli)</td>
    <td>Druga komórka pierwszego wiersza (druga komórka tabeli)</td>
  </tr>
  <tr>
    <td>Pierwsza komórka drugiego wiersza (trzecia komórka tabeli)</td>
    <td>Druga komórka drugiego wiersza (czwarta komórka tabeli)</td>
  </tr>
</table>
Kilka uwag:
  • Całą tabelę definiuje znacznik <table>..</table>.
  • Każdy wiersz jest określony znacznikiem <tr>..</tr>.
  • Wiersz składa się z komórek określanych znacznikami <td>..</td>.
  • Możemy zdefiniować komórkę jako nagłówkową za pomocą znacznika <th>..</th>.
  • Tabela jest tworzona wiersz po wierszu, a w wierszu komórka po komórce od lewej do prawej.

Ćwiczenie 2_5_1_1

Wykonaj stronę pokazującą tabelę jak na omawianym rysunku. Kod do wykonania tego zadania wygląda następująco:
<!doctype html>
<html>
  <head>
    <title>Prosta tabela</title>
    <meta charset="UTF-8" />
    <meta name="keywords" content="HTML5, tabela" />
    <meta name="description" content="Przykład prostej tabeli" /> 
    <meta name="author" content="Jan Kowalski" />
    <meta name="robots" content="all" />
    <style type="text/css">
      table, th, td
      {
        border-collapse:collapse;
        border:1px solid black;
        padding:5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Lp</th>
        <th>Imię i nazwisko</th>
        <th>Ocena</th>
      </tr>
      <tr>
        <th>1</th>
        <td>Jan Kowalski</td>
        <td>5</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Zdzisław Nowak</td>
        <td>4</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Bonifacy Brzęczyszczykiewicz</td>
        <td>6</td>
      </tr>
    </table>    
  </body>
</html>

Wyjątkowo pokazałem cały kod dokumentu, aby zwrócić uwagę na minimalne zastosowanie CSS, aby nasza tabela wyglądała jak tabela. Fragment kodu zaznaczony kolorem jasnozielonym, znajdujący się w sekcji head, po prostu przekopiuj do swojego dokumentu. Podobnie postępuj w następnych ćwiczeniach dotyczących tabel. Tak powinna wyglądać wykonana strona:

Zwróć uwagę na to że:

  • rozmiar komórek automatycznie dostosował się do ich zawartości, przy czym musisz wiedzieć że poprzez CSS możemy te rozmiary narzucić,
  • w komórkach nagłówkowych th, tekst jest automatycznie wyśrodkowywany, a czcionka pogrubiona
  • w naszej tabeli komórki nagłówkowe tworzą pierwszy wiersz, a także pierwszą kolumnę,
  • kolory pokazane na rysunku będziemy mogli definiować w oparciu o CSS.

Praca domowa

Wykonaj stronę na której pokażesz tabelę, która jest zestawieniem nazw przedmiotów, które masz w tym roku szkolnym. Tak więc tabela, będzie się składać z dwóch kolumn - Lp (liczby porządkowej) oraz Nazwy przedmiotu.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.