Strona główna :: Kurs HTML :: Składnia

Tabele

Cała konstrukcja tabeli powinna być otoczona tagami <table></table>, wszystkie wiersze w tabeli tagami <tr></tr>, natomiast wszystkie komórki tagami <td></td>.

<table>
    <tr> <!-- rozpoczynamy pierwszy wiersz -->
        <td>pierwsza komórka w pierwszym wierszu</td>
        <td>druga komórka w pierwszym wierszu</td>
    </tr>
    <tr> <!-- rozpoczynamy drugi wiersz -->
        <td>pierwsza komórka w drugim wierszu</td>
        <td>druga komórka w drugim wierszu</td>
    </tr>
</table>

Nagłówek, stopka i ciało tabeli
Istnieje możliwość wydzielenia trzech części tabeli: nagłówka, stopki i ciała tabeli. Wiersze stanowiące te części należy otoczyć tagami <thead></thead>, <tfoot></tfoot> lub <tbody></tbody>.

Tytuły kolumn
Pierwszy wiersz tabeli będzie najprawdopodobniej zawierał tytuły kolumn. Warto wówczas użyć tagów <th></th> zamiast <td></td>. Dzięki temu zabiegowi nagłówki tabeli będą pogrubione.

Łączenie komórek
Aby połączyć komórki tabeli, należy dopisać do pierwszej komórki, która w naszym zamierzeniu ma być połączona atrybut colspan - jeżeli chcemy połączyć komórki w poziomie, lub rowspan - jeżeli w pionie. Wartością tychże atrybutów powinna być ilość komórek, które zamierzamy połączyć. Należy pamiętać także o usunięciu z kodu wszystkich komórek, które zostały scalone.

Przykład skomplikowanej tabeli

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Przykladowa tabela</title>
    </head>
    <body>

<table border="1"> <!-- do tabeli dopisujemy atrybut border, dzięki niemu zobaczymy obramowanie całej tabeli oraz poszczególnych komórek -->
    <thead> <!-- rozpoczynamy część nagłówkową tabeli -->
        <tr>
            <td colspan="3">Lista pracownikow</td> <!-- scalamy 3 komórki w poziomie -->
        </tr>
        <tr> <!-- tytuły kolumn -->
            <th>imię</th>
            <th>nazwisko</th>
            <th>wynagrodzenie</th>
        </tr>
    </thead>
    <tbody> <!-- dopiero tutaj rozpoczyna się lista -->
        <tr>
            <td>Jan</td>
            <td>Kowalski</td>
            <td>4000</td>
        </tr>
        <tr>
            <td>Adam</td>
            <td>Nowak</td>
            <td rowspan="2">3000</td> <!-- scalamy 2 komórki w pionie -->
        </tr>
        <tr> <!-- wiersz posiada tylko 2 komórki, ponieważ trzecia została scalona w wierszu poprzednim -->
            <td>Anna</td>
            <td>Dąbrowska</td>
        </tr>
    </tbody>
    <tfoot> <!-- rozpoczynamy stopkę tabeli -->
        <tr>
            <td colspan="3"> <!-- stopka zawiera 3 scalone komórki -->
                Tabela przedstawia listę pracowników w firmie
            </td>
        </tr>
    </tfoot>
</table>

    </body>
</html>