wtorek, 2020-10-20

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.