Tabele w HTML: Tworzenie i Formatowanie
Tabele w HTML składają się z komórek ułożonych w rzędy i kolumny.
Podstawowe znaczniki używane do tworzenia tabel:
table – zaczyna i kończy tabele
tr – table row; poziomy rząd w tabeli
th – table header; nagłówek kolumny w tabeli
td – table data; pojedyncza komórka tabeli
*Gdyby znacznik nagłówka <th> wpisać zamiast pierwszych komórek w rzędzie (w tym przypadku komórka 1 i 4), komórki w pierwszej kolumnie też byłyby nagłówkami.
Gotowa tabela:
Komórki oznaczone znacznikiem <th> zostały wyróżnione. normalnie tabela wygląda inaczej (na przykład nie ma obramiowania) ale dla lepszego wyglądu zostało ono dodane.
„Colspan” i „rowspan”
Co robi Colspan?
Jest to atrybut, który możemy dodać do znaczników TD lub TH, aby połączyć (scalić) w poziomie kilka sąsiadujących ze sobą komórek tabeli.
Jak połączyć komórki w tabeli w HTML?
Aby scalić w poziomie kilka sąsiadujących ze sobą komórek tabeli, zamiast nich umieszczamy tylko jeden znacznik TD lub TH, ale dodajemy do niego atrybut colspan="..." o wartości odpowiadającej liczbie scalanych komórek. Na przykład, aby utworzyć tabelę składająca się z dwóch kolumn, gdzie w pierwszym wierszu komórki są scalone, można się posłużyć następującym kodem: <table> <tr> <td colspan="2">wiersz 1, kolumna 1+2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>.
Co robi Rowspan?
Jest to atrybut, który możemy dodać do znaczników TD lub TH, aby połączyć (scalić) w pionie kilka sąsiadujących ze sobą komórek tabeli.
Jak połączyć wiersze w tabeli HTML?
Aby scalić w pionie kilka sąsiadujących ze sobą komórek tabeli, zamiast nich umieszczamy tylko jeden znacznik TD lub TH, ale dodajemy do niego atrybut rowspan="..." o wartości odpowiadającej liczbie scalanych komórek. Na przykład, aby utworzyć tabelę składająca się z dwóch wierszy, gdzie w pierwszej kolumnie komórki są scalone, można się posłużyć następującym kodem: <table> <tr> <td rowspan="2">wiersz 1+2, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 2</td> </tr> </table>.
