Witaj ponownie! W tej lekcji pójdziemy o krok dalej w poznawaniu tabel. Nauczymy się bardziej zaawansowanych technik, takich jak zagnieżdżanie tabel wewnątrz siebie i scalanie komórek, które pozwolą nam tworzyć bardziej skomplikowane i elastyczne układy. Gotowy na rozpoczęcie? Przejdźmy do tego!

Zagnieżdżanie tabel

Zaczniemy od techniki zagnieżdżania tabel. Jest to niezwykle przydatna metoda, która umożliwia tworzenie rozbudowanych układów. Możemy umieścić jedną tabelę wewnątrz drugiej, tworząc hierarchiczne struktury. Wyobraź sobie, że budujemy tabelę z planem zajęć nauczyciela. Każdy dzień tygodnia może być osobną tabelą, a każda lekcja może być scalana w odpowiednich komórkach. Pozwala to na czytelne prezentowanie informacji.

Przykład zagnieżdżania tabeli:

<table>
  <tr>
    <td>Godzina</td>
    <td>Poniedziałek</td>
    <td>Wtorek</td>
  </tr>
  <tr>
    <td>8:00</td>
    <td>Tabela 1</td>
    <td>Tabela 2</td>
  </tr>
</table>

Scalanie komórek w tabeli

Kolejnym krokiem jest nauka scalania komórek. Dzięki temu możemy łączyć wiele komórek w jedną większą. To naprawdę przydatne, gdy chcemy stworzyć nagłówki czy oddzielić sekcje w tabeli. Atrybuty colspan i rowspan są tutaj kluczowe. colspan określa, ile kolumn ma być scalonych w poziomie, a rowspan ile w pionie.

Przykład scalania komórek:

<table>
  <tr>
    <td rowspan="2">Kolumna 1 scalona</td>
    <td>Dane</td>
    <td>Dane</td>
  </tr>
  <tr>
    <td>Dane</td>
    <td>Dane</td>
  </tr>
</table>

3. Tworzenie Zaawansowanych Układów Tabeli

Teraz możemy łączyć te dwie techniki, tworząc zaawansowane układy tabeli. Zagnieżdżając i scalać komórki, możemy osiągnąć niemal każdy pożądany układ tabeli. To fantastyczne narzędzie do prezentacji skomplikowanych informacji w czytelny i atrakcyjny sposób.

Ćwiczenia praktyczne: zagnieżdżanie i scalanie komórek

Zadanie 1: Tworzenie zagnieżdżonych tabel

1. Stwórz tabelę nadrzędną za pomocą znacznika <table>.
2. Wewnątrz pierwszej komórki tabeli nadrzędnej, stwórz nową tabelę za pomocą znacznika <table>. To będzie nasza tabela zagnieżdżona.
3. W drugiej komórce tabeli nadrzędnej, stwórz kolejną tabelę zagnieżdżoną. Możesz nadać tym tabelom różne style lub atrybuty, aby było łatwo je zidentyfikować.
4. Wypełnij każdą z tabel zagnieżdżonych danymi, używając znaczników <tr> i <td>.

Przykład:

<table border="1">
  <tr>
    <td>
      <table>
        <tr>
          <td>Tabela 1, wiersz 1</td>
          <td>Tabela 1, wiersz 2</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Tabela 2, wiersz 1</td>
          <td>Tabela 2, wiersz 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Zadanie 2: Tworzenie planu zajęć z scalaniem komórek

1. Stwórz tabelę planu zajęć za pomocą znacznika <table>.
2. W pierwszej kolumnie tabeli, dla każdego dnia tygodnia, użyj atrybutu rowspan, aby scalić komórki dla danej lekcji.
3. W pozostałych kolumnach, dodaj informacje o poszczególnych lekcjach w danej godzinie.
4. Dla kilku lekcji, zagnieźdż tabelę wewnątrz komórki, aby podać dodatkowe szczegóły.

Przykład:

<table border="1">
  <tr>
    <th>Godzina</th>
    <th>Poniedziałek</th>
    <th>Wtorek</th>
    <!-- ... -->
  </tr>
  <tr>
    <td>8:00</td>
    <td rowspan="2">Matematyka</td>
    <td>Biologia</td>
    <!-- ... -->
  </tr>
  <tr>
    <td>9:00</td>
    <td>Zagnieżdżona tabela: Fizyka</td>
    <!-- ... -->
  </tr>
  <!-- ... -->
</table>