Fernsehführer, der Semantik aufführt. Ist es nicht ein Tisch?

Question

Ich muss eine webbasierte TV-Guide-Liste erstellen.

Als ich anfing, dachte ich, alles was ich brauche, ist eine Tabelle zu erstellen, da es sich um Tabellendaten handelt.

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 die Situation. Während die <th> sind für alle 30 min. die Showlänge kann alles von 5min sein. bis zu ein paar Stunden.

Ich kann schummeln und machen alle <th> mit colspan = 6, so dass die Untereinheit wird 5 min. und dann mit dem Colspan jeder Show spielen, um in der Zeit/5 (min.) zu sein, und das ist mein Colspan.

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

Was soll ich tun?

Answer 1

Am Ende haben wir uns entschieden d dass ein TV-Guide nicht gerade ein Tisch ist. Es gibt den Header-Bereich, der die Stunden und den Körperteil zeigt, der die Shows nach Stunden zeigt, aber hier endet der Tisch-Teil.

Wir werden es als eine Liste von Listen tun die erste Liste der Header und die Senderliste und in jeder li wird es eine weitere Liste sein, in der Kopfzeile eine Liste der Stunden wird es sein (wo jede Stunde bekommt eine konstante Breite) und im Rest der li's (Kanal) wird es eine Liste der Shows für einen bestimmten Kanal geben und jeder li bekommt eine Breite basierend auf der Showlä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 leben in einer unvollkommenen Welt.

Answer 2

Haben Sie sich bereits vorhandene TV-Anleitungen zur Inspiration angesehen?

Die Tabelle mit vielen Colspans Option ist die here for example.

Ich denke, es gibt im Grunde zwei Möglichkeiten.

• Verwenden Sie Tabellen und Colspans. Sie können nur eine "Spalte" für eine begrenzte Zeit haben, also müssen Sie je nach Anzahl der Spalten pro Stunde auf die nächsten 5, 10 oder 15 Minuten runden und ein einstündiges Programm haben ein Colspan von 4, 6 oder sogar 12, wie Sie in Ihrer Frage darauf hinweisen.
• Verwenden Sie CSS mit einfachen DIVs (oder Sie könnten sie ULs und LIs, ein UL für jede Zeile und ein LI für jeden Block in dieser Zeile, wenn Sie wirklich wollen) und die Breite jedes Elements separat angeben. Sie können dies in Prozent (das Erweitern und Kontrahieren der gesamten Zeile) oder Pixeln tun. Vielleicht möchten Sie mit den inneren Elementen experimentieren, dh eine für jedes Programm, entweder floated blocks oder inline-blocks. Floats sollten in Ordnung sein, solange ein Rundungsfehler sie nicht umschließt.

Ich denke semantisch, ist die zweite Option besser. Wie Sie richtig betonen, ist es sehr ähnlich wie ein Tisch, also sollte ein Tisch angemessen sein, aber sobald Sie mehr Spalten verwenden, als Sie zeigen möchten, und Kolumnen, um Bereiche zu bemessen, verliert es den semantischen Reiz.

Answer 3

Die Daten, die Sie präsentieren, sind einer Grafik oder einem Diagramm sehr ähnlich. Es gibt kein entsprechendes HTML-Element. Ich würde sagen, dass der Tischansatz sinnvoll ist. Es macht auch Sinn, die Tabelle in 1/6 zu teilen. Es ist eine Beschränkung des Mediums, dass Sie keinen Colspan von 1,125 haben können. Da diese Tabelle programmgesteuert erzeugt wird, glaube ich nicht, dass das Aufteilen jeder logischen Zelle in 6 physische Zellen ein Hauptproblem sein wird. Testen Sie einfach ein Beispiel in einem nicht standardmäßigen Browser, der Ihnen wichtig ist, beispielsweise einem Bildschirmleseprogramm.

Answer 4

Ich denke, Sie haben gezeigt, dass Ihre Daten nicht wirklich eine Tabelle sind. Wenn Sie mit CSS vertraut sind, würde ich vorschlagen, dass Sie CSS verwenden und Regeln auf diese Weise festlegen.

Zum Beispiel könnten Sie Klassen wie fünf Minuten, zehn Minuten, fünfzehn Minuten, dreißig Minuten, eine Stunde usw. haben. Jede dieser Regeln würde so konfiguriert, dass Sie die richtige Breite und Breite erhalten bald. Für alles andere als gewöhnlich, könnten Sie dann einfach die Größe im laufenden Betrieb berechnen.

Answer 5

Dies ist definitiv nicht etwas, das Sie mit <Tabelle> lösen sollten.

Verwenden Sie mehrere <div> s, die jeweils über Inline- oder Inline-Block-Anzeige in CSS verfügen. Stellen Sie ihre Breite ein, wahrscheinlich am besten mit CSS-Klassen, z. 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> 

Answer 6

TV Listings? Es ist eine Liste ...

Naja, eigentlich gibt es einige ernsthafte Meinungsverschiedenheiten zu diesem Thema:

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

So entscheiden, welche Sie bevorzugen, und nehmen Sie Ihre wählen ...