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

Question

Je dois créer une liste de guides de télévision sur le Web.

Quand j'ai commencé, je pensais que tout ce dont j'avais besoin était de construire un tableau puisqu'il s'agissait de données tabulaires.

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 la situation. Bien que les <th> valent pour toutes les 30 min. la durée du spectacle peut aller de 5min. jusqu'à quelques heures.

Je peux tricher et faire chaque <=> avec colspan = 6 pour que la sous-unité dure 5 min. et puis jouer avec le colspan de chaque spectacle pour être long / 5 (min.) et c’est mon colspan.

Mais (il y a toujours un mais), ce que j'ai maintenant n'est pas un tableau avec des données tabulaires, mais un genre de tableau de spaghettis.

Que dois-je faire?

Answer 1

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

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

<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

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

Utilisez plusieurs < div > s, chacun ayant un affichage inline ou inline-block défini en CSS. Définissez leur largeur, probablement au mieux en utilisant des classes CSS, par exemple. comme suit:

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

Ensuite, le code 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

Avez-vous inspiré les guides de télévision existants?

La table avec beaucoup de colspans est celle utilisée ici par exemple .

Je pense qu'il y a fondamentalement deux options.

• Utilisez des tables et disposez de colspans. Vous ne pouvez avoir qu'une "colonne" pour une durée limitée. Vous devrez donc peut-être arrondir à 5, 10 ou 15 minutes, selon le nombre de colonnes par heure. Un programme d'une heure peut avoir un colspan de 4, 6 ou même 12, comme vous le soulignez dans votre question.
• Utilisez CSS avec des DIV simples (ou vous pouvez même en faire des UL et des LI, un UL pour chaque ligne et un LI pour chaque bloc de cette ligne si vous le souhaitez vraiment) et spécifiez la largeur de chaque élément séparément. Vous pouvez le faire en pourcentage (permettant à toute la ligne de se développer et de se contracter) ou en pixels. Vous voudrez peut-être expérimenter avec les éléments internes, c'est-à-dire un pour chaque programme, qu'il s'agisse de blocs flottants ou de blocs en ligne. Les flotteurs devraient convenir tant que l’erreur d’arrondi ne les rend pas bouclés.

Je pense sémantiquement que la deuxième option est préférable. Comme vous l'avez fait remarquer à juste titre, cela ressemble beaucoup à un tableau, alors un tableau devrait être approprié, mais une fois que vous utilisez beaucoup plus de colonnes que vous avez l'intention de montrer, et que vous colspan pour dimensionner des zones, il perd son attrait sémantique.

Answer 4

Je pense que vous avez montré que vos données ne sont pas vraiment une table. Si vous êtes à l'aise avec les CSS, je vous conseillerais alors de choisir CSS et de définir les règles de cette manière.

Par exemple, vous pouvez avoir des classes telles que cinq minutes, dix minutes, quinze minutes, trente minutes, une heure, etc., chacune de ces règles étant configurée pour vous donner la largeur correcte, etc. sur. Pour toute autre chose hors de l'ordinaire, vous pouvez simplement calculer la taille à la volée.

Answer 5

Les données que vous présentez ressemblent beaucoup à un graphique ou à un tableau. Aucun élément HTML ne correspond à cela. Je dirais que l'approche de la table est logique. Fractionner la table en 1/6 est également logique. C'est une limitation du support que vous ne pouvez pas avoir un colspan de 1.125. Étant donné que ce tableau sera généré par programme, je ne pense pas que la division de chaque cellule logique en 6 cellules physiques soit un problème majeur. Testez simplement un échantillon sur tous les navigateurs non standard qui vous intéressent, comme un lecteur d'écran.

Answer 6

Programme télé? C'est une liste ...

En fait, il existe de sérieux désaccords à ce sujet:

• Radio Times utilise une liste
• TVGuide.co.uk utilise un fouillis de tableaux imbriqués de niveau 4
• Sky utilise un nombre assez surprenant de divs et de javascript.

Alors, choisissez ce que vous préférez et faites votre choix ...