• Artykuł

          

Samouczek: Tworzenie tabel - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Witold Lasik

Opublikowano: 2011-09-29

Podczas tworzenia dokumentów HTML bardzo często spotykamy się z koniecznością przedstawienia większej ilości danych w zorganizowanej formie. Jako, że dokumenty HTML pozwalają na korzystanie z wielu różnorodnych form zawartości takich jak: tekst, grafika, obiekty osadzane, aplety, itd., wskazane jest, aby sposób połączenia tych elementów nie wpłynął negatywnie na ich funkcjonalność. Sprawdzoną metodą są tabele, które swoimi założeniami przypominają tabele znane z edytorów tekstowych, jednak w HTML są o wiele częściej wykorzystywane.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • tworzyć tabele w HTML i osadzać w nich różne formy zawartości,
  • modyfikować i dopasowywać strukturę tabel do indywidualnych potrzeb,
  • używać podstawowych cech CSS, modyfikujących wygląd poszczególnych elementów tabeli.

Implementacja

Naszym zadaniem będzie utworzenie prostej tabeli, przechowującej zestaw różnych informacji.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy zadania.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title>Tworzenie tabel w HTML</title>
    </head>
    <body>
    </body>
</html>
  1. Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.

Tworzenie prostej tabeli, zawierającej informacje

  1. W edytorze, z otwartym plikiem index.html, utwórz strukturę tabeli poprzez dodanie kodu:
<table>
</table>

Pamiętaj, że kod ten należy umieścić w sekcji body (pomiędzy znacznikami <body> i </body>).

  1. W strukturze tabeli (pomiędzy znacznikami <table> i </table> dodaj trzy wiersze. Kod odpowiedzialny za wygenerowanie wierszy to:
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
  1. W każdym wierszu będą znajdowały się dwie komórki, tym samym zostanie utworzona tabela zbudowana z trzech wierszy i dwóch kolumn. Dodaj do każdego wiersza (pomiędzy znacznikami <tr> i </tr>) znaczniki tworzące komórki:
<td></td>
<td></td>
  1. Struktura tabeli jest gotowa, teraz wypełnimy ją treścią:
    —   w pierwszym wierszu (pomiędzy pierwszymi znacznikami <tr></tr>) dodaj tekst: „Imię:” w pierwszej komórce (<td></td>) i „Nazwisko:” w drugiej komórce (<td></td>),
    —   w drugim wierszu (pomiędzy drugimi znacznikami <tr></tr>) dodaj tekst: „Anna” w pierwszej komórce (<td></td>) i „Nowak” w drugiej komórce (<td></td>),
    —   w trzecim wierszu (pomiędzy trzecimi znacznikami <tr></tr>) dodaj tekst: „Jan” w pierwszej komórce (<td></td>) i „Kowalski” w drugiej komórce (<td></td>).
  2. Zapisz zmiany w edytorze i porównaj efekty swojej pracy z Rys. 2.

Rys. 2. Podstawowa struktura tabeli w pliku index.html.

  1. Odśwież stronę w przeglądarce. Porównaj efekty swojej pracy Rys. 3.

Rys. 3. Zadanie 1 – przykładowa tabela.

Informacja
Powyższa tabela swoim wyglądem niewiele przypomina tradycyjne tabele. Aby sprawić, by lepiej rozdzielała znajdujące się w niej dane, zajmiemy się modyfikacją jej wyglądu przy użyciu stylów CSS.

Modyfikowanie wyglądu tabeli przy użyciu stylów CSS

  1. W sekcji head dodaj znaczniki odpowiedzialne za przechowywanie reguł stylów CSS.
<style type="text/css
</style>
  1. Pomiędzy znacznikami style dodaj reguły CSS:
table {
    border-collapse: collapse;
    width: 200px; }
td {
    border: 2px solid #000000;
    padding: 5px;}
.header {
    font-weight: bold;
    background-color: #C0C0C0; }
  1. Powiąż klasę header z wierszem nagłówka. Dodaj atrybut class="header" do pierwszego nagłówka tabeli (pierwszy znacznik HTML <tr>). Element powinien mieć następującą formę:
<tr class="header">
  1. Zapisz zmiany w edytorze i porównaj efekty swojej pracy z Rys. 4.

Rys. 4. Tabela i formatowanie w pliku index.html.

  1. Odśwież stronę w przeglądarce. Porównaj stronę wynikową z Rys. 5.

Rys. 5. Zadanie 2 – tabela zmodyfikowana przy użyciu CSS.

Informacja
Tabela utworzona w drugim zadaniu o wiele lepiej zestawia ze sobą dane. Dzięki stylom CSS jesteśmy w stanie zmieniać wiele parametrów tabeli i dopasowywać ją do charakteru danych, jakie przechowujemy. W trzecim zadaniu skupimy się na utworzeniu tabeli, która w efektowny sposób przedstawi zestawienie pracowników, ich zarobków i daty zatrudnienia.

Tworzenie tabeli, zawierającej informacje o pracownikach

  1. Poniżej poprzedniej tabeli dodaj:
<br />
  1. Utwórz nową tabelę, składającą się z czterech wierszy i trzech kolumn (każdy wiersz zawiera trzy komórki). Chcąc przełożyć naszą sytuację na kod HTML musimy posłużyć się:
    —   znacznikiem <table> i jego zamknięciem </table>, który stworzy ogólną strukturę tabeli,
    —   czterema znacznikami <tr> i ich zamknięciami </tr>, odpowiedzialnymi za tworzenie wierszy,
    —   trzema znacznikami <td> i ich zamknięciami </td> na każdy wiersz, które będą generowały komórki, a tym samym kolumny naszej tabeli.
  2. Do znacznika, który tworzy tabelę (<table>) dodaj atrybut id="pracownicy". Do znacznika, który tworzy pierwszy wiersz tabeli (<tr>) dodaj atrybut class="header", natomiast do trzech pozostałych znaczników, które generują pozostałe wiersze, dodaj atrybut class="emp".
  3. Utwórz znaczniki stylów (<style></style>) w sekcji head strony (zawartość znacznika <head>) i dodaj w niej następujące reguły:
table#pracownicy {
    border-collapse: collapse;
    width: 500px; }
#pracownicy td {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    padding: 5px; }
#pracownicy .header {
    background-color: #dbe5f1;
    font-weight: bold; }
#pracownicy .emp {
    background-color: #f3f3f3; }
  1. Wprowadź do tabeli następujące dane:
    —   do trzech komórek (znaczniki <td></td>) pierwszego wiersza (z atrybutem class="header"), wprowadź kolejno następujące dane: „Pracownik:”, „Zarobki:” i „Data zatrudnienia:”,
    —   do trzech komórek (znaczniki <td></td>) drugiego wiersza (z atrybutem class=”emp”), wprowadź kolejno następujące dane: „Anna Nowak”, „2000” i „2005-05-11”,
    —   do trzech komórek (znaczniki <td></td>), znajdujących się w trzecim wierszu (z atrybutem class=”emp”), wprowadź kolejno następujące dane: „Jan Kowalski”, „3000” i „2001-01-01”,
    —   do trzech komórek (znaczniki <td></td>), osadzonych w czwartym wierszu tabeli (z atrybutem class=”emp”), wprowadź po kolei dane: „Marek Markowski”, „4000” i „1997-08-23”.
  2. Zapisz zmiany w edytorze i porównaj efekty swojej pracy z Rys. 6. (na Rys. 6. został przedstawiony jedynie kod związany z ostatnio dodawaną tabelą).

Rys. 6. Tabela pracownicy i jej formatowanie.

  1. Odśwież stronę w przeglądarce. Porównaj stronę wynikową z Rys. 1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
    <head>
        <title>Tworzenie tabel w HTML</title>
        <style type="text/css">  
           table {
                border-collapse: collapse;
                width: 200px; }
           td {
                border: 2px solid #000000;
                padding: 5px;}
           .header {
                font-weight: bold;
                background-color: #C0C0C0; }  
                
            table#pracownicy {
                border-collapse: collapse;
                width: 500px; }
            #pracownicy td {
                border-width: 1px;
                border-style: solid;
                border-color: #000000;
                padding: 5px; }
            #pracownicy .header {
                background-color: #dbe5f1;
                font-weight: bold; }
            #pracownicy .emp {
                background-color: #f3f3f3; } 
        </style>
    </head>
    <body>
        <table>
        <tr class="header">
            <td>Imię:</td>
            <td>Nazwisko:</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>Nowak</td>
        </tr>
        <tr>
            <td>Jan</td>
            <td>Kowalski</td>
        </tr>
        </table>

        <br />
        <table id="pracownicy">
            <tr class="header">
                <td>Pracownik:</td>
                <td>Zarobki:</td>
                <td>Data zatrudnienia:</td>
            </tr>
            <tr class="emp">
                <td>Anna Nowak</td>
                <td>2000</td>
                <td>2005-05-11</td>
            </tr>
            <tr class="emp">
                <td>Jan Kowalski</td>
                <td>3000</td>
                <td>2001-01-01</td>
            </tr>
            <tr class="emp">
                <td>Marek Markowski</td>
                <td>4000</td>
                <td>1997-08-23</td>
            </tr>
        </table>

    </body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się tworzyć proste tabele w HTML oraz dostosowywać je do własnych potrzeb. Poznaliśmy zasady tworzenia wierszy i komórek oraz zależności między znacznikami, odpowiedzialnymi za ich generowanie. Omówiliśmy podstawowe sposoby modyfikacji wyglądu tabeli, przy użyciu stylów CSS, a także zapoznaliśmy się z rolą tabel w dokumencie HTML oraz z możliwościami, jakie niesie za sobą ich wykorzystanie.

W kolejnym artykule nauczymy się scalać wiersze i komórki w tabeli HTML.