TV-Programm Auflistung Semantik. Ist es nicht ein Tisch?

https://stackoverflow.com/questions/626224

06-07-2019
|

Frage

Ich brauche einen Web-basierte TV-Programm-Eintrag zu bauen.

Als ich anfing, dachte ich, alles, was ich brauche eine Tabelle zu erstellen, da es ein tabellarischen Daten vorhanden ist.

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

aber leider ist dies nicht der Fall. Während der <th> sind für alle 30 min. die Show Länge kann alles von 5min sein. bis zu ein paar Stunden.

kann ich betrüge und jedes <th> mit colspan = 6, so dass die Untereinheit wird 5 min machen. und dann mit dem colspan jeder Show spielt Länge zu sein in der Zeit / 5 (min.), und das ist mein colspan.

Aber (es gibt immer ein aber), jetzt, was ich habe, ist nicht eine Tabelle mit Tabellendaten, was ich habe, ist eine Art von Spaghetti-Tabelle.

Was soll ich tun?

Lösung 4

Am Ende haben wir entschieden, dass ein TV-Programm ist nicht gerade ein Tisch. Es gibt den Header-Abschnitt, der die Stunden und das Körperteil zeigt, dass die Shows von Stunde zu Stunde zeigt aber hier ist, wo der Tabellenteil endet.

Wir werden es als eine Liste von Listen tun die erste Liste der Header und die Programmliste und in jeder li es eine weitere Liste sein, in der Kopfzeile wird es eine Liste von Stunden (wo jede Stunde eine konstante Breite bekommt) und in den Rest des Li (Kanal) wird es eine Liste der Shows für eine bestimmte sein Kanal und jede li erhält eine Breite basierend auf der Show Länge.

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

Es ist keine perfekte Lösung, aber wir in einer unvollkommenen Welt leben.

Andere Tipps

Dies ist definitiv nicht etwas, das Sie mit

lösen sollten.

Verwenden Sie mehr

s, von denen jede Anzeige Inline- oder inline-block in CSS festgelegt. Stellen Sie ihre Breite, wahrscheinlich am besten getan CSS-Klassen, z.B. wie folgt:

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

Dann wird der 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>

Haben Sie an den bestehenden TV Guides für Inspiration geschaut?

Die Tabelle mit vielen colspans Option ist derjenige verwendet hier zum Beispiel .

Ich denke, es gibt grundsätzlich zwei Möglichkeiten.

Verwenden Sie Tabellen, und haben colspans. Sie können nur eine ‚Säule‘ für eine begrenzte Zeit haben, so können Sie auf die Anzahl der Spalten pro Stunde auf den nächsten, 5, 10 oder 15 Minuten abzurunden haben je und ein einstündiges Programm haben könnte ein colspan von 4, 6 oder sogar 12, wie Sie in Ihrer Frage darauf hin.
Verwenden Sie CSS mit einfachen DIVs (oder man könnte sie sogar ULs und LIs machen, ein UL für jede Zeile und ein LI für jeden Block in dieser Reihe, wenn Sie wirklich wollen) und die Breite der einzelnen Elemente separat angeben. Sie könnten dies in Prozent tun (so dass die ganze Reihe zu erweitern und Vertrag) oder Pixel. Sie können mit den inneren Elementen experimentieren wollen, dh eine für jedes Programm, wobei entweder schwebten Blöcke oder Inline-Blöcke. Floats sollten so lange in Ordnung sein als Rundungsfehler sie nicht machen wickeln.

Ich denke, semantisch, die zweite Option ist besser. Wie Sie zu Recht darauf hin, ist es sehr ähnlich wie ein Tisch, so sollte eine Tabelle angemessen sein, aber sobald man sich in vielen weiteren Spalten mit, als Sie zeigen mögen, und colspans Größenbereiche, verliert sie den semantischen Reiz.

Ich glaube, Sie haben gezeigt, dass Ihre Daten nicht wirklich ein Tisch ist. Wenn Sie mit CSS vertraut sind, dann würde ich vorschlagen, dass Sie den Weg nach unten gehen würden CSS verwenden und Regeln einrichten, die Art und Weise.

Sie können beispielsweise Klassen wie fünf Minuten haben könnten, zehn Minuten, fünfzehn Minuten, dreißig Minuten, eine Stunde etc .... jeder dieser Regeln würde konfiguriert werden Ihnen die richtige Breite zu geben und so auf. Für alles andere aus dem Üblichen, könnte man dann berechnen, nur die Größe im Fluge.

Die Daten, die Sie präsentieren sind wirklich ähnlich ein Diagramm oder ein Diagramm der Arten. Es gibt keine HTML-Element, das dem entspricht. Ich würde sagen, dass der Tisch Ansatz macht Sinn. Die Aufteilung der Tabelle in 1 / 6ths macht auch Sinn. Es ist eine Beschränkung des Mediums, das Sie nicht colspan von 1,125 haben. Da diese Tabelle programmatisch erzeugt wird glaube ich nicht, jede logische Zelle in 6 physische Zellen aufgeteilt wird ein großes Problem sein. Testen Sie einfach eine Probe auf alle Nicht-Standard-Browsern die Sie interessieren, wie ein Bildschirmleseprogramm.

TV Listings? Es ist eine Liste ...

Nun, es tatsächlich sind einige ernsthaften Meinungsverschiedenheiten zu diesem Thema:

So entscheiden, welche Sie bevorzugen, und nehmen Sie Ihre Wahl ...

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow