Zaplanuj tabelę HTML z przeplatającymi się scaleniami, najpierw rysując pełną siatkę, przypisując każdej scalonej komórce kształt prostokąta i zapisując komórki tylko w miejscach, w których te prostokąty się zaczynają. Ten przewodnik omawia syntetyczny przykład, który możesz utworzyć w aplikacji TextEdit i wyświetlić na Macu.

Zdefiniuj siatkę przed zapisaniem komórek

Zadanie polega na zbudowaniu jednej tabeli z pięcioma kolumnami, która zawiera zgrupowane nagłówki kolumn, komórkę obejmującą jednocześnie wiersze i kolumny oraz inną komórkę obejmującą inną liczbę wierszy. Poniższe etykiety i treści mają charakter poglądowy: przedstawiają neutralne bloki węzłów uporządkowane według slotów.

Tabele HTML przedstawiają dane wielowymiarowe. Ich komórki muszą pokrywać siatkę tabeli bez nakładania się na siebie. Jeśli zamierzonym rezultatem jest po prostu układ strony z niezwiązanych ze sobą pól, standard HTML zaleca autorom użycie narzędzi do układu, takich jak CSS Grid. W tym przypadku każdy blok ma istotny związek z nagłówkami wierszy i kolumn, więc tabela pasuje do zadania. Standard HTML: element table.

Zacznij od nazwania najmniejszych kolumn występujących w dowolnym miejscu tabeli. W tym przykładzie są to Slot, Węzeł A, Węzeł B, Węzeł C i Notatka. Nagłówek Węzły obejmie trzy z nich; nie tworzy dodatkowej kolumny.

Oba atrybuty określające zakres zliczają całą powierzchnię komórki, łącznie z jej pozycją początkową. Dlatego colspan="2" obejmuje dwie kolumny, a rowspan="2" obejmuje dwa wiersze. Zastosowanie obu tworzy prostokąt o wymiarach dwa na dwa. Pominięty zakres domyślnie wynosi jeden. MDN: Element komórki danych tabeli.

Określenie „przeplatające się” opisuje sposób, w jaki te prostokąty do siebie pasują. Każda komórka nadal ma prostokątny obszar; pojedyncza komórka nie może zawijać się wokół innej. Wyobraź sobie układanie opisanych prostokątów na papierze w kratkę.

Utwórz wykaz slotów dla każdego wiersza

Użyj rozszerzonej tabeli planowania, w której powtarzające się etykiety pokazują obszar jednej scalonej komórki. Powtórzenia w tym wykazie nie oznaczają, że tę komórkę należy powtórzyć w HTML. Sekcja nagłówka będzie miała dwa wiersze, a treść — cztery.

Planowany wiersz Kolumna 1 Kolumna 2 Kolumna 3 Kolumna 4 Kolumna 5
Nagłówek 1 Slot Węzły Węzły Węzły Notatka
Nagłówek 2 Slot Węzeł A Węzeł B Węzeł C Notatka
Treść 1 Slot 1 Blok P Blok P Blok Q Notatka X
Treść 2 Slot 2 Blok P Blok P Blok R Notatka X
Treść 3 Slot 3 Blok S Blok T Blok T Notatka X
Treść 4 Slot 4 Blok U Blok U Blok U Notatka Y

Teraz zapisz pozycję początkową i wymiary każdego scalonego prostokąta. Współrzędne zaczynają się od 1 i są liczone osobno w każdej sekcji.

Komórka Pozycja początkowa Liczba objętych wierszy Liczba objętych kolumn
Nagłówek Slot Wiersz nagłówka 1, kolumna 1 2 1
Nagłówek Węzły Wiersz nagłówka 1, kolumna 2 1 3
Nagłówek Notatka Wiersz nagłówka 1, kolumna 5 2 1
Blok P Wiersz treści 1, kolumna 2 2 2
Notatka X Wiersz treści 1, kolumna 5 3 1
Blok T Wiersz treści 3, kolumna 3 1 2
Blok U Wiersz treści 4, kolumna 2 1 3

Dzięki temu wykaz trudniejszy drugi wiersz treści staje się prosty: Blok P zajmuje już kolumny 2 i 3, a Notatka X — kolumnę 5. W tym wierszu zaczynają się tylko Slot 2 i Blok R, więc potrzeba zaledwie dwóch elementów komórek.

Wykonaj poniższe czynności dla każdego wiersza:

  1. Zaznacz pozycje zajęte przez zakresy rozpoczęte w poprzednich wierszach.
  2. Znajdź pierwszą niezajętą kolumnę.
  3. Umieść kolejną komórkę i zaznacz cały jej prostokąt, również w przyszłych wierszach.
  4. Odrzuć prostokąt, jeśli jakakolwiek jego część nakłada się na zajętą pozycję.
  5. Powtarzaj, aż wszystkie pięć pozycji kolumn zostanie uwzględnionych.

Ta procedura jest pomocą w planowaniu, wyprowadzoną z modelu tabeli opisanego w standardzie. Przeglądarki pomijają zajęte pozycje początkowe podczas rozmieszczania komórek, ale autorzy nadal muszą unikać nakładających się prostokątów. Dlatego samo policzenie elementów komórek w wierszu nie wystarczy. Standard HTML: model przetwarzania.

Przydatna kontrola wiersza: zajęte kolumny przeniesione z poprzednich wierszy + kolumny objęte przez nowo rozpoczynające się komórki = pięć. W wierszu treści 2 trzy pozycje są zajęte przez zakresy z poprzednich wierszy, a dwie przez nowe komórki. W wierszu treści 3 jedna pozycja jest zajęta przez wcześniejszy zakres, a cztery przez nowe komórki. Sprawdzaj także rzeczywiste położenie komórek: sama zgodność sum nie wykryje nakładania się połączonego z luką.

Zaplanuj grupy wierszy i relacje z nagłówkami

Umieść oba wiersze nagłówka w jednym thead, a wszystkie cztery wiersze treści w jednym tbody. Komórka nie może obejmować kilku oddzielnych grup wierszy. Na przykład Blok P nie może zaczynać się w jednym tbody i kończyć w innym. Standard określa także kolejność elementów podrzędnych tabeli: opcjonalny caption, grupy kolumn, opcjonalny thead, wiersze treści i opcjonalny tfoot. Standard HTML: Tabele.

W przykładzie zdefiniowano trzy grupy kolumn: jedną kolumnę dla Slotu, trzy dla Węzłów i jedną dla Notatki. Nagłówek Węzły używa scope="colgroup", a jego podrzędne nagłówki używają scope="col". Wskazówki W3C dotyczące nieregularnych nagłówków łączą zgrupowane nagłówki z jawną strukturą grup kolumn. Tabele z nieregularnymi nagłówkami.

Geometria i znaczenie wymagają osobnych decyzji. Blok P obejmuje dwa wiersze slotów i dwie kolumny węzłów, więc jego zamierzonymi nagłówkami są Slot 1, Slot 2, Węzły, Węzeł A i Węzeł B. Notatka X należy do trzech wierszy slotów i kolumny Notatka.

W przypadku tych scalonych komórek danych przykład jawnie określa powiązania za pomocą wartości id w komórkach nagłówka oraz rozdzielonych spacjami odwołań w atrybucie headers każdej komórki danych. W3C opisuje to podejście w przypadku złożonych tabel, których relacje między nagłówkami wymagają jawnego wskazania. Tabele z wielopoziomowymi nagłówkami.

Nie scalaj niezależnych wartości tylko dlatego, że mają identyczny tekst. W tym syntetycznym dokumencie Blok P celowo opisuje jeden blok rozciągający się na cztery pozycje. Jeśli każda pozycja zawiera osobną obserwację, zachowaj te komórki oddzielnie, aby tabela odzwierciedlała to rozróżnienie.

Utwórz kompletny plik HTML na Macu

Aplikacja TextEdit pozwala utworzyć lokalny dokument HTML. Wybierz Plik > Nowy, a następnie Format > Utwórz zwykły tekst. Wklej cały poniższy dokument, wybierz Plik > Zachowaj i nadaj mu nazwę span-plan.html. Jeśli pojawi się pytanie o rozszerzenie, wybierz Użyj .html. Są to opisane przez Apple kroki tworzenia pliku HTML. Praca z dokumentami HTML w aplikacji TextEdit na Macu.

To kompletny, samodzielny dokument zawierający przykładową treść i style. Nie wymaga skryptów ani zewnętrznych zasobów.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Otwórz zapisany plik w przeglądarce na Macu. Porównaj go z wykazem: Blok P powinien obejmować Sloty 1 i 2 pod Węzłami A i B; Notatka X powinna obejmować Sloty 1–3; Blok T powinien obejmować wyłącznie Węzły B i C w Slocie 3. Te trzy kontrole pozwolą odróżnić zamierzony przeplatający się układ od tabeli, która ma tylko prostokątny obrys.

Jeśli po ponownym otwarciu pliku w aplikacji TextEdit widzisz sformatowaną treść, wybierz Plik > Otwórz, wskaż plik, kliknij Pokaż opcje i zaznacz Ignoruj polecenia tekstu sformatowanego. Przy kolejnej edycji możesz też skorzystać z udokumentowanej przez Apple opcji TextEdit > Ustawienia > Otwieranie i zachowywanie, gdzie można włączyć Wyświetlaj pliki HTML jako kod HTML zamiast tekstu sformatowanego. Przewodnik Apple po plikach HTML w aplikacji TextEdit.

Diagnozuj błędy i aktualizuj plan bez utraty struktury

Jeśli wynik różni się od planu, sprawdź pierwszy nieprawidłowy wiersz i prostokąty zajmujące w nim pozycje z poprzednich wierszy. Przed zmianą odstępów lub stylów wykonaj poniższe kontrole.

Objaw Co sprawdzić Poprawka w tym przykładzie
Pojawia się nieoczekiwana dodatkowa kolumna Komórki dodane w miejscu zajętym już przez wcześniejszy zakres Wiersz treści 2 zawiera tylko Slot 2 i Blok R; usuń z niego komórki wypełniające
Blok R pojawia się pod niewłaściwym węzłem Szerokość i wysokość Bloku P Sprawdź, czy Blok P ma oba atrybuty rowspan="2" i colspan="2"
Notatka X kończy się po Slocie 2 Liczbę objętych wierszy Ustaw zakres na trzy wiersze
Poziomy nagłówków nie są wyrównane Pierwszy wiersz nagłówka i liczba komórek w drugim wierszu Slot i Notatka obejmują dwa wiersze; drugi wiersz nagłówka zawiera tylko trzy nagłówki węzłów
Scalonej komórce brakuje części nagłówków Odwołania headers Porównaj każdy objęty wiersz i kolumnę z wykazem

Pusta komórka jest odpowiednia, gdy dana pozycja oznacza rzeczywiście pustą wartość. Nie jest potrzebna w pozycji już zajętej przez komórkę obejmującą kilka pozycji. Dokumentacja komórek MDN wyjaśnia, że zwykłe komórki dopasowują się do dostępnych pozycji, a zakresy nie mogą się nakładać. MDN: Element komórki danych tabeli.

W tym stałym przykładzie użyj jawnych, dodatnich wartości określających liczbę wierszy. Wartość specjalna rowspan="0" oznacza pozostałe wiersze bieżącej grupy wierszy, więc dodanie wiersza może rozszerzyć zakres tej komórki. Używaj tej wartości tylko wtedy, gdy zamierzona relacja oznacza „aż do końca tej grupy”. MDN: Działanie zakresu wierszy.

Przed wstawieniem, usunięciem lub zmianą kolejności wiersza zaktualizuj wykaz. Jeśli między Slotami 1 i 2 wstawisz nowy wiersz, który ma być objęty przez Blok P, zwiększ jego zakres i dodaj nagłówek nowego wiersza do listy headers. Osobno ponownie rozważ Notatkę X: ta sama zmiana może wpłynąć na jej zamierzony zakres. Zmiana kolejności wierszy wymaga tej samej kontroli, ponieważ zakres zależy od pozycji w dokumencie.

Jeśli treści nie da się już przedstawić jako zrozumiałych prostokątów, uprość jej układ. W3C zaleca rozważenie mniejszych tabel, gdy wiele poziomów nagłówków utrudnia zrozumienie jednej tabeli. Tabele z wielopoziomowymi nagłówkami.

Podczas aktualizowania dokumentu trzymaj wykaz slotów obok kodu źródłowego. Przy każdej zmianie określ zamierzone prostokąty, zapisuj komórki tylko w pozycjach początkowych i sprawdzaj powiązane nagłówki. Dzięki temu możesz wielokrotnie zachować zarówno kształt tabeli, jak i relacje wyrażane przez jej treść.

Źródła