Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Wprowadzenie do tabel HTML

wtorek,

Wprowadzenie do tabel HTML

Jednym ze sposobów prezentowania i grupowania danych jest tabela. Najprostsza tabela utworzona w języku HTML skada się z wierszy, które zawierają komórki. Wymagane znaczniki to:

  • table — tabela;
  • tr (table row) – wiersz tabeli;
  • td (table data) – komórka tabeli;

Bez korzystania z dodatkowych atrybutów liczba komórek w każdym wierszu musi być taka sama. Wbrew pozorom poniższy kod HTML to niewielka tabela składająca się z pięciu wierszy zawierających po pięć komórek.

<table>
    <tr>
        <td>Model</td>
        <td>Data wydania</td>
        <td>Rdzenie</td>
        <td>Częstotliwość</td>
        <td>Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5942B</td>
        <td>luty 2020</td>
        <td>16</td>
        <td>2,20 GHz</td>
        <td>18 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5931B</td>
        <td>luty 2020</td>
        <td>12</td>
        <td>2,20 GHz</td>
        <td>13,5 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5962B</td>
        <td>luty 2020</td>
        <td>24</td>
        <td>2,20 GHz</td>
        <td>27 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5921B</td>
        <td>luty 2020</td>
        <td>8</td>
        <td>2,20 GHz</td>
        <td>9 MB L2 Cache</td>
    </tr>
</table>
Model Data wydania Rdzenie Częstotliwość Cache
Intel Atom® Processor P5942B luty 2020 16 2,20 GHz 18 MB L2 Cache
Intel Atom® Processor P5931B luty 2020 12 2,20 GHz 13,5 MB L2 Cache
Intel Atom® Processor P5962B luty 2020 24 2,20 GHz 27 MB L2 Cache
Intel Atom® Processor P5921B luty 2020 8 2,20 GHz 9 MB L2 Cache

Zastosowanie kolejnego znacznika przyniesie dwie korzyści. Kod stanie się bardziej semantyczny, a tabela uzyska bardziej czytelny wygląd. Poniżej zamieniono znaczniki td z pierwszego wiersza na th (table header, nagłówki tabeli).

<table>
    <tr>
        <th>Model</th>
        <th>Data wydania</th>
        <th>Rdzenie</th>
        <th>Częstotliwość</th>
        <th>Cache</th>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5942B</td>
        <td>luty 2020</td>
        <td>16</td>
        <td>2,20 GHz</td>
        <td>18 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5931B</td>
        <td>luty 2020</td>
        <td>12</td>
        <td>2,20 GHz</td>
        <td>13,5 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5962B</td>
        <td>luty 2020</td>
        <td>24</td>
        <td>2,20 GHz</td>
        <td>27 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5921B</td>
        <td>luty 2020</td>
        <td>8</td>
        <td>2,20 GHz</td>
        <td>9 MB L2 Cache</td>
    </tr>
</table>>
</table>
Model Data wydania Rdzenie Częstotliwość Cache
Intel Atom® Processor P5942B luty 2020 16 2,20 GHz 18 MB L2 Cache
Intel Atom® Processor P5931B luty 2020 12 2,20 GHz 13,5 MB L2 Cache
Intel Atom® Processor P5962B luty 2020 24 2,20 GHz 27 MB L2 Cache
Intel Atom® Processor P5921B luty 2020 8 2,20 GHz 9 MB L2 Cache

Przy domyślnych stylach CSS dołączanych przez przeglądarkę, tabela nie wygląda zbyt efektownie. Wystarczy dodać kilka reguł, aby uzyskać znacznie lepszy efekt. W znajdującym się poniżej edytorze można poeksperymentować z własnymi stylami CSS, dodając nowe reguły lub modyfikując aktualne.

Elementy tabeli można grupować, służą do tego znaczniki:

  • thead – nagłówek;
  • tbody – treść tabeli;
  • tfoot – stopka;

W tabeli można umieścić także znacznik caption oznaczający opis tabeli. Poniżej znajduje się kod tabeli HTML wzbogacony o kolejne znaczniki.

<table>
    <caption>Najnowsze procesory Intel Atom®</caption>
    <thead>
    <tr>
        <th>Model</th>
        <th>Data wydania</th>
        <th>Rdzenie</th>
        <th>Częstotliwość</th>
        <th>Cache</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Model</th>
        <th>Data wydania</th>
        <th>Rdzenie</th>
        <th>Częstotliwość</th>
        <th>Cache</th>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Intel Atom® Processor P5942B</td>
        <td>luty 2020</td>
        <td>16</td>
        <td>2,20 GHz</td>
        <td>18 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5931B</td>
        <td>luty 2020</td>
        <td>12</td>
        <td>2,20 GHz</td>
        <td>13,5 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5962B</td>
        <td>luty 2020</td>
        <td>24</td>
        <td>2,20 GHz</td>
        <td>27 MB L2 Cache</td>
    </tr>
    <tr>
        <td>Intel Atom® Processor P5921B</td>
        <td>luty 2020</td>
        <td>8</td>
        <td>2,20 GHz</td>
        <td>9 MB L2 Cache</td>
    </tr>
    </tbody>
</table>

Kolejny edytor pozwala na dodawanie stylów do zaprezentowanego wcześniej kodu HTML.

Usprawnianie kodowania

Kodowanie tabel można znacznie przyśpieszyć stosując dostępną dla wielu edytorów wtyczkę Emmet. Na filmie widocznym poniżej zakodowano strukturę tabeli wykorzystanej w poprzednich przykładach.

Ćwiczenie

Idealnym ćwiczeniem do zawarcia lepszej znajomości z tabelami HTML jest wykonanie planu lekcji swojej klasy w formie strony internetowej.

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: Konferencja teherańska

Konferencja teherańska

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dekret o ordynacji wyborczej

Dekret o ordynacji wyborczej

Artykuł: Arm Holdings

Arm Holdings

Artykuł: Podstawowe style CSS dla formularza

Podstawowe style CSS dla formularza

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna