Guida TV che elenca la semantica. Non è un tavolo?

Question

Ho bisogno di creare un elenco di guide TV basato sul web.

Quando ho iniziato ho pensato che tutto ciò di cui ho bisogno è di costruire una tabella dato che è un dato tabellare.

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... 

ma purtroppo questa non è la situazione. Mentre il <th> è per ogni 30 minuti. la lunghezza dello spettacolo può essere qualsiasi cosa da 5 minuti. fino a poche ore.

Posso imbrogliare e rendere ogni <th> con colspan = 6, quindi l'unità secondaria sarà 5 min. e poi gioca con il colspan di ogni spettacolo per essere la durata nel tempo/5 (min.) e questo è il mio colspan.

Ma (c'è sempre un ma), ora quello che ho non è una tabella con dati tabulari, quello che ho è una specie di tavolo per spaghetti.

Cosa devo fare?

Answer 1

Alla fine abbiamo deciso d che una guida TV non è esattamente un tavolo. C'è la sezione intestazione che mostra le ore e la parte del corpo che mostra gli spettacoli in base all'ora, ma qui è dove finisce la parte del tavolo.

lo faremo come una lista di liste primo elenco è l'intestazione e la lista canali e in ogni Li ci sarà un'altra lista, nell'intestazione ci sarà un elenco di ore (in cui ogni ora viene una larghezza costante) e nel resto del canale (canale) ci sarà un elenco degli spettacoli per un canale specifico e ogni li avrà una larghezza in base alla lunghezza dello spettacolo.

<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> 

Non è una soluzione perfetta ma stiamo vivendo in un mondo imperfetto.

Answer 2

Hai guardato le guide TV esistenti per l'ispirazione?

La tabella con un sacco di opzioni colspans è quella utilizzata here for example.

Penso che ci siano fondamentalmente due opzioni.

• Utilizzare tabelle e disporre di colonnine. Puoi avere una sola "colonna" per un tempo limitato, quindi potresti dover arrotondare al più vicino, 5, 10 o 15 minuti a seconda del numero di colonne all'ora e un programma di un'ora potrebbe avere un colspan di 4, 6 o anche 12, come fai notare nella tua domanda.
• Usa CSS con DIV semplici (o potresti persino renderli UL e LI, un UL per ogni riga e un LI per ogni blocco in quella riga se lo desideri) e specificare la larghezza di ogni articolo separatamente. Puoi farlo in percentuale (permettendo all'intera riga di espandersi e contrarsi) o pixel. Potresti voler sperimentare con gli elementi interni, cioè uno per ogni programma, che sono blocchi flottanti o blocchi in linea. I galleggianti dovrebbero andare bene finché l'errore di arrotondamento non li avvolge.

Penso che semanticamente, la seconda opzione è migliore. Come giustamente fai notare, è molto simile a un tavolo quindi un tavolo dovrebbe essere appropriato, ma una volta che usi molte più colonne di quelle che intendi mostrare, e le colonne per le dimensioni, perde il fascino semantico.

Answer 3

I dati che stai presentando sono molto simili a un grafico o un grafico di sorta. Non c'è nessun elemento HTML che corrisponde a questo. Direi che l'approccio al tavolo ha senso. Anche la suddivisione del tavolo in 1/6 ha senso. È una limitazione del mezzo che non puoi avere un colspan di 1.125. Poiché questa tabella verrà generata a livello di codice, non penso che suddividere ciascuna cella logica in 6 celle fisiche costituirà un problema grave. Basta testare un campione su qualsiasi browser non standard a cui tieni, come uno screen reader.

Answer 4

Penso che tu abbia dimostrato che i tuoi dati non sono realmente una tabella. Se sei a tuo agio con i CSS, ti suggerirei di utilizzare il CSS e impostare le regole in questo modo.

Ad esempio, potresti avere classi come cinque minuti, dieci minuti, quindici minuti, trenta minuti, un'ora ecc. Ognuna di queste regole sarà configurata per darti la larghezza corretta e presto. Per qualsiasi altra cosa fuori dall'ordinario, potresti quindi calcolare la dimensione al volo.

Answer 5

Questo non è sicuramente qualcosa che si dovrebbe risolvere con <tabella>.

Utilizzare più div > s, ciascuno con la visualizzazione in linea o blocco in linea impostata in CSS. Imposta la loro larghezza, probabilmente il modo migliore di farlo usando le classi CSS, ad es. come segue:

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

Poi l'HTML: annunci

<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? E 'una lista ...

Beh in realtà, ci sono alcune divergenze seri su questo:

• 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.

Quindi decidere quale preferite e prendete la vostra scegli ...