Aby powiązać wartości HTML z nagłówkiem obejmującym kilka wierszy, zdefiniuj grupę wierszy i użyj scope="rowgroup". W przypadku bardziej złożonych relacji nadaj nagłówkom unikatowe identyfikatory i wymień je w atrybucie headers każdej komórki danych. W tym poradniku utworzysz lokalny przykład w aplikacji TextEdit na Macu.

Celem jest utworzenie jednej tabeli HTML, której wartości zachowują kontekst, gdy etykieta obejmuje wiele wierszy. W3C opisuje grupowane nagłówki w poradniku dotyczącym tabel nieregularnych, a jawne powiązania w poradniku dotyczącym nagłówków wielopoziomowych.

Jakiego powiązania wymaga Twoja tabela?

Zacznij od zapisania etykiet potrzebnych do zrozumienia jednej wartości. W poniższym przykładowym zestawie danych wartość 40 oznacza szerokość dużego wariantu w milimetrach w zestawie Alpha. Jej pełny kontekst to zatem Alpha, Large i Width. Wszystkie wymiary są przykładowymi danymi poglądowymi.

Przed edycją skorzystaj z poniższej wskazówki:

Struktura tabeli Powiązanie do użycia Wymóg strukturalny
Nagłówek opisuje jeden zwykły wiersz scope="row" Umieść nagłówek w komórce th w tym wierszu
Nagłówek opisuje jedną zwykłą kolumnę scope="col" Umieść nagłówek w komórce th w tej kolumnie
Nagłówek opisuje całą grupę wierszy treści scope="rowgroup" Umieść te wiersze w osobnym elemencie tbody
Wartość wymaga kilku nagłówków lub relacje zmieniają się w obrębie tabeli Unikatowe identyfikatory nagłówków i lista headers Jawnie wskaż każdy pasujący nagłówek

Wartości scope opisują relację; rowspan określa, ile wierszy zajmuje komórka. Wysoki nagłówek nadal wymaga odpowiedniego powiązania. MDN omawia oba atrybuty osobno w opisie elementu nagłówka tabeli.

W przypadku regularnej grupy wzorzec W3C łączy nagłówek obejmujący wiersze z osobnymi elementami tbody i scope="rowgroup". Tabela może zawierać kilka grup wierszy treści. Wiersze nagłówków umieszczaj w thead; nagłówek obejmujący wiersze w stopce należy umieścić w tfoot. W3C: Tables with Irregular Headers.

W przypadku złożonych tabel jawne powiązania pozwalają bezpośrednio określić pełne znaczenie wartości. W3C zaleca to podejście dla układów obejmujących między innymi zmieniające się nagłówki kolumn oraz komórki powiązane z co najmniej trzema nagłówkami. Pełny przykład wykorzystuje jawne listy wraz ze strukturalnymi atrybutami scope, dzięki czemu każda wartość liczbowa wskazuje swoje trzy nagłówki. W3C: Tables with Multi-Level Headers.

Utwórz dokument HTML w TextEdit

Do ćwiczenia użyj nowego pliku lokalnego. Jeśli dostosowujesz istniejący dokument, najpierw zachowaj osobną kopię, aby móc porównać oryginalne wartości i ich kolejność ze zmianami.

  1. Otwórz TextEdit i wybierz File > New.
  2. Wybierz Format > Make Plain Text.
  3. Wklej cały dokument poniżej, bez znaczników ogrodzenia Markdown.
  4. Wybierz File > Save i nadaj plikowi nazwę table-headers.html.
  5. Jeśli pojawi się pytanie o rozszerzenie, wybierz Use .html.

Są to udokumentowane przez Apple kroki tworzenia pliku HTML w TextEdit. Przykład nie wymaga pakietów, skryptów ani zewnętrznych zasobów.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Aby wyświetlić podgląd, otwórz zapisany plik w Safari. Powinny być widoczne cztery kolumny, a zestawy Alpha i Beta powinny obejmować po dwa wiersze treści. Pozostaw plik otwarty w TextEdit, aby wykonać opisane niżej kontrole kodu źródłowego.

Aby ponownie otworzyć dokument w TextEdit, wybierz File > Open, wskaż plik, kliknij Show Options i zaznacz Ignore rich text commands. Możesz też włączyć opcję Display HTML files as HTML code instead of formatted text w sekcji TextEdit > Settings, a następnie Open and Save. Apple opisuje te opcje w instrukcji edycji HTML.

W jaki sposób przykład wiąże każdą wartość z jej nagłówkami?

Odczytaj kod źródłowy wartości 40 jako niewielką mapę powiązań. Jej lista headers zawiera tiles-alpha, tiles-alpha-large i tiles-width. Te identyfikatory wskazują odpowiednio Alpha, Large i Width. Odpowiadająca jej wartość wysokości, 60, zachowuje dwa pierwsze identyfikatory, a zamiast trzeciego używa tiles-height.

Identyfikatory wybiera autor; nie są specjalnymi słowami kluczowymi HTML. Każdy wymieniony token musi wskazywać element th w tej samej tabeli. Oddzielaj tokeny spacjami i nie powtarzaj ich w jednej liście. Wymagania te opisano w atrybutach wspólnych komórek tabeli w standardzie HTML.

Lista podaje pełny kontekst zamiast oczekiwać, że czytelnik odtworzy go na podstawie innego nagłówka. Technika H43 W3C opisuje umieszczanie identyfikatorów właściwych nagłówków w atrybucie headers każdej komórki danych.

Zwróć uwagę, że drugi wiersz zestawu Alpha zaczyna się od Large. Nie zawiera dodatkowej komórki dla Alpha: pierwszy wiersz już zajmuje tę pozycję za pomocą rowspan="2". Dodanie pustej komórki zmieniłoby siatkę tabeli. MDN wyjaśnia w uwagach dotyczących użycia komórek nagłówka, że komórki zajmują dostępne pozycje pozostawione przez komórki rozciągnięte na wiele wierszy lub kolumn.

Zastosuj to samo rozumowanie, aby rozróżnić dwa pozornie podobne układy. Etykieta po lewej stronie obejmująca kilka wierszy treści może być nagłówkiem grupy wierszy. Etykieta kolumny obejmująca dwa wiersze u góry nadal może być nagłówkiem kolumny z scope="col"; jej fizyczna wysokość nie zmienia relacji w relację nagłówka grupy wierszy. MDN: Atrybuty nagłówków.

Sprawdź powiązania przed zmianą tabeli

W tym przykładzie przeprowadź kontrolę trzech etykiet. Wybierz wartość, określ przypisany jej zestaw, wariant i wymiar, a następnie porównaj te etykiety ze wskazanymi identyfikatorami.

Wartość Oczekiwany kontekst Oczekiwana wartość headers
20 Alpha, Small, Width tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Large, Height tiles-alpha tiles-alpha-large tiles-height
25 Beta, Small, Width tiles-beta tiles-beta-small tiles-width
65 Beta, Large, Height tiles-beta tiles-beta-large tiles-height

Powtórz tę kontrolę dla każdej komórki liczbowej. Upewnij się, że każdy wskazany identyfikator istnieje, każde odwołanie wskazuje właściwy nagłówek i żaden identyfikator nie powtarza się w innym miejscu dokumentu. Kontrole te są zgodne z procedurą opisaną w technice H43 W3C. Schludny wygląd tabeli to tylko jeden element kontroli; sprawdź również powiązania w kodzie źródłowym.

Dodając trzeci wariant Alpha, wstaw jego wiersz do istniejącego elementu tbody zestawu Alpha, zmień zakres Alpha na rowspan="3", nadaj nowemu wariantowi unikatowy identyfikator i dodaj odpowiednią listę trzech nagłówków do każdej nowej komórki liczbowej. Podczas wprowadzania tej zmiany zachowaj oryginalną kolejność wierszy i wartości.

Usuwając wariant, odpowiednio zmniejsz zakres. Jeśli usuwasz pierwszy wiersz grupy, przenieś nagłówek grupy do pierwszego pozostałego wiersza. Komórka obejmująca wiele wierszy musi pozostać w obrębie jednej grupy wierszy: model tabeli HTML nie pozwala komórce rozciągać się na kilka grup wierszy. WHATWG: Model tabeli.

Jeśli aplikacja później generuje lub porządkuje wiersze, potraktuj te zasady jako wymagania aktualizacji: zachowuj wiersze każdej grupy razem, umieszczaj jej nagłówek obejmujący wiele wierszy w pierwszym wierszu, utrzymuj prawidłową liczbę wierszy objętych zakresem i aktualizuj zmienione odwołania. W tym przykładzie przesunięcie Large przed Small w zestawie Alpha wymagałoby również przeniesienia nagłówka Alpha do nowego pierwszego wiersza.

Co zrobić, jeśli edytor nie zachowuje tych atrybutów?

Możliwość scalania komórek przez edytor nie gwarantuje, że zachowuje on użyte tutaj powiązania. Zanim zaufasz edytowanemu lub wyeksportowanemu dokumentowi, sprawdź w jego kodzie HTML zamierzone granice grup, zakresy, identyfikatory i listy nagłówków. Obsługiwany w tym poradniku proces pracy na Macu polega na bezpośredniej edycji kodu źródłowego w TextEdit.

Jeśli narzędzie do tworzenia dokumentów nie zachowuje wymaganej struktury, rozważ użycie osobnej, prostszej tabeli dla każdego zestawu, z kolumnami Variant, Width i Height. W3C przedstawia podział złożonych tabel na mniejsze tabele jako alternatywę, która może ułatwić zarówno ich odczyt, jak i tworzenie. Wybierz tę opcję tylko wtedy, gdy zmiana pierwotnej struktury jest dopuszczalna. W3C: Podziel tabele wielopoziomowe.

Po ukończeniu przykładu wybierz dowolną liczbę i sprawdź, czy trzy wskazane przez nią etykiety dokładnie opisują to, co mierzy. Następnie wykonuj tę samą kontrolę po każdym dodaniu, usunięciu lub przestawieniu wiersza. Dzięki temu zachowasz zarówno znaczenie tabeli, jak i jej wygląd.

Źródła