Tabele i Listy w HTML

Chociaż w nowoczesnym webdevie tabele służą tylko do... wyświetlania tabelarycznych danych (np. wyników ligi piłkarskiej), to na egzaminie INF.03 tabele są nadal bardzo popularne. CKE potrafi nawet poprosić o ułożenie obrazków w siatce za pomocą tabeli.

Podstawowa budowa tabeli

Zacznijmy od rozwinięcia skrótów:

• <table> – Cała tabela.
• <tr> (Table Row) – Rząd w tabeli.
• <th> (Table Header) – Komórka nagłówkowa (zazwyczaj pogrubiona i wyśrodkowana).
• <td> (Table Data) – Zwykła komórka z danymi.

<table>
    <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>Kowalski</td>
    </tr>
</table>

Ciekawostka: Warto korzystać z dodatkowych tagów grupujących: <thead>, <tbody> oraz <tfoot>. Pozwalają one łatwiej stylować tabelę w CSS, a jeśli tabela jest bardzo długa i się drukuje, przeglądarka powtórzy nagłówek na każdej nowej stronie papieru!

Królowie Egzaminu: colspan i rowspan

Na arkuszach INF.03 zawsze znajdziesz polecenie typu: "Scal komórki pierwszego wiersza tak, aby zajmowały trzy kolumny".

• colspan – rozciąga komórkę w poziomie (na kolumny).
• rowspan – rozciąga komórkę w pionie (na rzędy).

Przykład: Tabela 2x2, gdzie górny rząd to jedna połączona komórka.

<table>
    <tr>
        <!-- Rozciągamy na 2 kolumny, więc nie robimy drugiego <td> w tym rzędzie! -->
        <td colspan="2">Tytuł tabeli</td>
    </tr>
    <tr>
        <td>Lewa komórka</td>
        <td>Prawa komórka</td>
    </tr>
</table>

Pułapka CKE 🪤: Kiedy ustawiasz colspan="2", musisz usunąć jedną komórkę z tego samego rzędu. Inaczej Twoja tabela będzie "wystawać" i zepsujesz układ!

Listy

Listy są banalnie proste, ale trzeba pamiętać o różnicy.

• <ul> (Unordered List) – Lista nieuporządkowana (wypunktowana kropkami).
• <ol> (Ordered List) – Lista uporządkowana (numerowana 1, 2, 3...). Wewnątrz zawsze używamy tagu <li> (List Item).

<h3>Moje ulubione języki:</h3>
<ul>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>