Guide TV liste de la sémantique. N'est-ce pas une table?

Question

J'ai besoin de créer une liste de guides TV basée sur le Web. Quand j'ai commencé, j'ai pensé que tout ce dont j'avais besoin est de construire une table, car c'est une donnée tabulaire.

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

mais hélas, ce n'est pas le cas. Alors que les <th> sont pour toutes les 30 min. la durée du spectacle peut être n'importe quoi à partir de 5min. jusqu'à quelques heures.

Je peux tricher et faire tous les <th> avec colspan = 6 de sorte que l'unité secondaire sera 5 min. et ensuite jouer avec le colspan de chaque spectacle pour être longueur dans le temps/5 (min.) et c'est mon colspan.

Mais (il y a toujours un but), maintenant ce que j'ai n'est pas une table avec des données tabulaires, ce que j'ai c'est une sorte de table à spaghetti.

Que dois-je faire?

Answer 1

À la fin, nous avons décidé d qu'un guide TV n'est pas exactement une table. Il y a la section d'en-tête qui montre les heures et la partie du corps qui montre les spectacles par heure mais où se termine la partie table.

Nous le ferons comme une liste de listes la première liste est l'en-tête et la liste des canaux et dans chaque li y aura une autre liste, dans l'en-tête il y aura une liste d'heures (où chaque heure obtient une largeur constante) et dans le reste du li (canal) il y aura une liste des spectacles pour un canal spécifique et chaque li obtient une largeur basée sur la longueur de l'émission.

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

Ce n'est pas une solution parfaite mais nous vivons dans un monde imparfait.

Answer 2

Avez-vous regardé les guides TV existants pour vous inspirer?

Le tableau avec beaucoup d'options colspans est celui utilisé here for example.

Je pense qu'il existe essentiellement deux options.

• Utilisez des tables et des colspans. Vous ne pouvez avoir qu'une seule «colonne» pour une durée limitée, vous devrez donc arrondir à la plus proche, 5, 10 ou 15 minutes selon votre nombre de colonnes par heure et un programme d'une heure pourrait avoir un colspan de 4, 6 ou même 12, comme vous l'indiquez dans votre question.
• Utilisez CSS avec DIVs plain (ou vous pouvez même les faire UL et LI, un UL pour chaque ligne et un LI pour chaque bloc de cette ligne si vous voulez vraiment) et spécifier la largeur de chaque élément séparément. Vous pouvez le faire en pourcentage (permettant à toute la ligne de se dilater et de se contracter) ou pixels. Vous pouvez expérimenter avec les éléments internes, c'est-à-dire un pour chaque programme, soit des blocs flottants, soit des blocs en ligne. Les flotteurs devraient être corrects tant que l'erreur d'arrondi ne les fait pas s'enrouler.

Je pense que sémantiquement, la deuxième option est meilleure. Comme vous le faites remarquer à juste titre, cela ressemble beaucoup à une table, donc une table devrait être appropriée, mais une fois que vous utilisez beaucoup plus de colonnes que vous avez l'intention de montrer, et les colspans pour les zones de taille, cela perd l'attrait sémantique. Les données que vous présentez sont vraiment similaires à un graphique ou un tableau de toutes sortes.

Answer 3

Il n'y a pas d'élément HTML correspondant à cela. Je dirais que l'approche de la table est logique. La division de la table en 1/6e a aussi du sens. C'est une limitation du support que vous ne pouvez pas avoir un colspan de 1.125. Puisque cette table sera générée par programme, je ne pense pas que diviser chaque cellule logique en 6 cellules physiques sera un problème majeur. Testez simplement un échantillon sur tous les navigateurs non standard qui vous intéressent, tels qu'un lecteur d'écran.

Answer 4

Je pense que vous avez montré que vos données ne sont pas vraiment une table. Si vous êtes à l'aise avec CSS, alors je suggérerais que vous utilisiez CSS et que vous établissiez des règles de cette façon. Par exemple, vous pourriez avoir des classes telles que cinq minutes, dix minutes, quinze minutes, trente minutes, une heure etc .... chacune de ces règles serait configuré pour vous donner la bonne largeur et bientôt. Pour toute autre chose hors de l'ordinaire, vous pouvez simplement calculer la taille à la volée.

Answer 5

Ce n'est certainement pas quelque chose que vous devriez résoudre avec <table>.

Utilisez plusieurs <div> s, chacun ayant un affichage inline ou un bloc en ligne défini en CSS. Définissez leur largeur, probablement mieux effectuée en utilisant des classes CSS, par ex. comme suit:

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

Puis le 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 6

Listes de télévision? Il est une liste ...

Et bien en fait, il y a des désaccords sérieux sur ce point:

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

décident donc que vous préférez et prenez votre Choisissez ...