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

Question

Devo creare un elenco di guide TV basate sul web.

Quando ho iniziato ho pensato che tutto ciò di cui avevo bisogno fosse costruire una tabella poiché si tratta di dati tabulari.

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 i <th> sono per ogni 30 minuti. la durata dello spettacolo può variare da 5 minuti. fino a poche ore.

Posso imbrogliare e fare ogni <=> con colspan = 6, quindi la sottounità sarà di 5 min. e poi gioca con il colspan di ogni show per essere lunghezza nel tempo / 5 (min.) e questo è il mio colspan.

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

Cosa devo fare?

Answer 1

Alla fine abbiamo deciso che una guida TV non è esattamente un tavolo. C'è la sezione dell'intestazione che mostra le ore e la parte del corpo che mostra gli spettacoli a ore ma qui è dove finisce la parte della tabella.

Lo faremo come un elenco di elenchi il primo elenco è l'intestazione e l'elenco dei canali e in ogni li ci sarà un altro elenco, nell'intestazione ci sarà un elenco di ore (dove ogni ora ottiene una larghezza costante) e nel resto dei li (canale) ci sarà un elenco degli spettacoli per uno specifico canale e ogni li ottiene 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 viviamo in un mondo imperfetto.

Answer 2

Questo sicuramente non è qualcosa che dovresti risolvere con < table > ;.

Usa più < div > s, ognuno con display inline o blocco inline impostato in CSS. Imposta la loro larghezza, probabilmente meglio se si usano 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; }
...

Quindi l'HTML:

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

Hai cercato ispirazione per le guide TV esistenti?

La tabella con molte opzioni colspans è quella usata qui ad esempio .

Penso che ci siano sostanzialmente due opzioni.

• Usa le tabelle e hanno colspan. Puoi avere solo una '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 addirittura 12, come fai notare nella tua domanda.
• Usa i 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 vuoi davvero) e specifica la larghezza di ogni elemento separatamente. Puoi farlo in percentuale (permettendo a tutta la riga di espandersi e contrarsi) o pixel. Potresti voler sperimentare gli elementi interni, ovvero uno per ciascun programma, sia blocchi fluttuanti che blocchi in linea. I float dovrebbero andare bene fintanto che l'errore di arrotondamento non li rende avvolgenti.

Penso semanticamente, la seconda opzione è migliore. Come giustamente fai notare, è molto simile a una tabella, quindi una tabella dovrebbe essere appropriata, ma una volta che usi molte più colonne di quelle che intendi mostrare e le colonne di dimensioni per le aree di dimensioni, perde l'appeal semantico.

Answer 4

Penso che tu abbia dimostrato che i tuoi dati non sono in realtà una tabella. Se ti senti a tuo agio con i CSS, ti suggerirei di seguire la strada per usare i CSS e impostare le regole in quel modo.

Ad esempio potresti avere classi come cinque minuti, dieci minuti, quindici minuti, trenta minuti, un'ora ecc ... ognuna di queste regole sarebbe configurata per darti la larghezza corretta e così sopra. Per qualsiasi altra cosa fuori dall'ordinario, potresti semplicemente calcolare la dimensione al volo.

Answer 5

I dati che stai presentando sono molto simili a un grafico o una specie di grafico. Non esiste alcun elemento HTML corrispondente 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 è possibile avere un colspan di 1.125. Poiché questa tabella verrà generata a livello di codice, non penso che dividere ogni cella logica in 6 celle fisiche sarà un grosso problema. Basta provare un campione su tutti i browser non standard che ti interessano, come uno screen reader.

Answer 6

Elenco TV? È un elenco ...

Beh, in realtà, ci sono alcuni gravi disaccordi su questo:

• il Radio Times utilizza un elenco
• TVGuide.co.uk utilizza una massa di tabelle nidificate di 4 livelli
• Sky utilizza un numero abbastanza sorprendente di div e molti javascript.

Quindi decidi quale preferisci e fai la tua scelta ...