Przewodnik telewizyjny z listą semantyki. Czy to nie stół?

Question

Potrzebuję zbudować internetowy przewodnik telewizyjny.

Kiedy zacząłem, myślałem, że wszystko, czego potrzebuję, to zbudować tabelę, ponieważ jest to dane tabelaryczne.

date  00:00 00:30 01:00 etc... 
channel 1 show 1 show 2 show 3 etc... 
channel 2 show 3 show 4 show 5 etc... 

ale niestety tak nie jest. Podczas gdy <th> są za każde 30 min. długość pokazu może wynosić od 5 minut. do kilku godzin.

Mogę oszukiwać i robić co <th> z colspan = 6, aby jednostka podrzędna trwała 5 minut. a następnie grać z colspan każdego show, aby mieć długość w czasie/5 (min.) i to jest moja colspan.

Ale (zawsze jest ale), teraz to, co mam, nie jest tabelą z tabelarycznymi danymi, to, co mam, to jakiś rodzaj spaghetti table.

Co należy zrobić?

Answer 1

Na koniec zdecydowaliśmy d, że przewodnik telewizyjny nie jest dokładnie tabelą. Istnieje sekcja nagłówka, która pokazuje godziny i część ciała, która pokazuje pokazy po godzinie, ale tutaj kończy się część tabeli.

Będziemy robić to jako listę list pierwsza lista jest nagłówkiem i listą kanałów , a na każdym li będzie następna lista, w nagłówku będzie lista godzin (gdzie co godzinę dostaje się stała szerokość), a w pozostałej części li (kanał) pojawi się lista pokazów dla konkretnego kanału, a każdy li uzyska szerokość na podstawie długości pokazu.

<ol> 
    <li>date 
     <ol> 
      <li>00:00</li> 
      <li>00:30</li> 
      <li>01:00</li> 
      <li>01:30</li> 
      . 
      . 
      . 
     </ol> 
    </li> 
    <li>Channel 1 
     <ol> 
      <li>Show 1</li> 
      <li>Show 2</li> 
      <li>Show 3</li> 
      <li>Show 4</li> 
      . 
      . 
      . 
     </ol> 
    </li> 
    <li>Channel 2 
    . 
    . 
    . 
<ol> 

To nie jest doskonałe rozwiązanie, ale żyjemy w niedoskonałym świecie.

Answer 2

Czy szukałeś inspiracji w istniejących przewodnikach telewizyjnych?

Tabela z dużą ilością opcji colspans jest używana here for example.

Myślę, że są w zasadzie dwie opcje.

• Użyj tabel i użyj colspans. Możesz mieć tylko jedną "kolumnę" przez skończony czas, więc możesz zaokrąglić do najbliższej, 5, 10 lub 15 minut w zależności od liczby kolumn na godzinę, a program godzinny może mieć średnica wynosząca 4, 6 lub nawet 12, jak wskazano w pytaniu.
• Użyj CSS ze zwykłymi DIV (możesz nawet zrobić ich UL i LI, UL dla każdego wiersza i LI dla każdego bloku w tym wierszu, jeśli naprawdę chcesz) i określić szerokość każdego elementu osobno. Możesz to zrobić w procentach (pozwalając na powiększenie i zawężenie całego wiersza) lub pikseli. Możesz eksperymentować z elementami wewnętrznymi, tj. Po jednym dla każdego programu, będącymi blokami pływającymi lub blokami wbudowanymi. Pływaki powinny być dobre, o ile błąd zaokrąglenia nie powoduje ich zawijania.

Myślę, że semantycznie, druga opcja jest lepsza. Jak słusznie zauważyłeś, jest to bardzo podobne do stołu, więc stolik powinien być odpowiedni, ale gdy już zaczniesz używać wielu kolumn, które zamierzasz pokazywać, a także colspanów do rozmiaru obszarów, to tracisz znaczenie semantyczne.

Answer 3

Prezentowane dane są bardzo podobne do wykresu lub rodzaju wykresów. Nie ma elementu HTML odpowiadającego temu. Powiedziałbym, że podejście do stołu ma sens. Podział tabeli na 1/6 ma również sens. To ograniczenie tego medium, że nie możesz mieć colspanu 1.125. Ponieważ ta tabela zostanie wygenerowana programowo, nie sądzę, aby podział każdej komórki logicznej na 6 komórek fizycznych był poważnym problemem. Wystarczy przetestować próbkę w dowolnych niestandardowych przeglądarkach, takich jak czytnik ekranu.

Answer 4

Myślę, że pokazałeś, że twoje dane nie są tak naprawdę tabelą. Jeśli nie masz nic przeciwko CSS, sugerowałbym, abyś zmienił sposób korzystania z CSS i tak ustawił reguły.

Na przykład możesz mieć zajęcia takie jak pięć minut, dziesięć minut, piętnaście minut, trzydzieści minut, godzina itp. ... każda z tych reguł zostanie skonfigurowana tak, aby uzyskać właściwą szerokość i wkrótce. Jeśli chodzi o cokolwiek niezwykłego, możesz po prostu obliczyć rozmiar w locie.

Answer 5

To zdecydowanie nie jest coś, co należy rozwiązać przy pomocy <tabeli>.

Użyj wielu <div> s, z których każdy ma zestaw wbudowanych lub wbudowanych bloków w CSS. Ustaw ich szerokość, najlepiej najlepiej zrobić przy użyciu klas CSS, np. w następujący sposób:

div.channel div 
{ 
    display: inline-block; 
} 
div.five { width: 1em; } 
div.ten { width: 2em; } 
div.fifteen { width: 3em; } 
... 

Następnie HTML: Oferty

<div class="channel"> 
    <div class="five">Five minute program</div> 
    <div class="fifteen">Fifteen minute program</div> 
    <div class="five">Five minute program</div> 
</div> 
<div class="channel"> 
    <div class="ten">Ten minute program</div> 
    <div class="fifteen">Fifteen minute program</div> 
</div> 

Answer 6

TV? To lista ...

No faktycznie, istnieją poważne różnice zdań na ten temat:

• the Radio Times does use a list
• TVGuide.co.uk uses a morass of 4 level nested tables
• Sky use a quite shocking number of divs and lot of javascript.

więc zdecydować, który wolisz i zabrać swoje wybierz ...