TVガイドリストのセマンティクス。テーブルじゃない？

StackOverflow https://stackoverflow.com/questions/626224

  •  06-07-2019
  •  | 
  •  

質問

WebベースのTVガイドリストを作成する必要があります。

始めたとき、表データであるため、テーブルを作成するだけでいいと思いました。

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

しかし残念なことに、これは状況ではありません。 <th>は30分ごとです。ショーの長さは5分から何でもかまいません。数時間まで。

colspan = 6ですべての<=>をごまかすことができ、サブ単位は5分になります。そして、すべてのショーのcolspanで時間/ 5（分）の長さになるように再生します。これが私のcolspanです。

（ただし、常にあります）、今私が持っているのは表形式のデータを持つテーブルではなく、私が持っているのはスパゲッティテーブルのようなものです。

どうすればよいですか？

役に立ちましたか？

解決 4

最後に、TVガイドは正確な表ではないと判断しました。 時間を示すヘッダーセクションと、時間ごとのショーを示す本文部分がありますが、ここは表部分の終わりです。

リストのリストとしてそれを行います 最初のリストはヘッダーとチャンネルリストです すべてのliには別のリストがあり、ヘッダーには時間のリストがあり（1時間ごとに一定の幅になります）、liの残りの部分（チャネル）には特定の番組のリストがありますチャンネルとすべてのliはショーの長さに基づいて幅を取得します。

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

これは完全な解決策ではありませんが、私たちは不完全な世界に住んでいます。

他のヒント

これは間違いなく、<！> lt; table <！> gt;で解決すべきものではありません。

複数の<！> lt; div <！> gt;を使用し、それぞれにCSSで表示インラインまたはインラインブロックを設定します。幅を設定します。おそらく、CSSクラスを使用するのが最適です。次のとおりです。

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

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

インスピレーションを得るために既存のテレビガイドを見たことがありますか？

多くのcolspansオプションのあるテーブルは、たとえばここ。

基本的に2つのオプションがあると思います。

  • テーブルを使用し、colspansがあります。限られた時間に1つの「列」しか持てないため、1時間あたりの列数に応じて、5、10、または15分単位で最も近い値に丸める必要があり、1時間のプログラムでは質問で指摘したように、4、6、または12のコルスパン。
  • CSSをプレーンDIVとともに使用し（または、必要に応じてULとLI、各行にUL、その行の各ブロックにLIにすることもできます）、各アイテムの幅を個別に指定します。これは、パーセンテージ（行全体の拡大と縮小を許可）またはピクセルで行うことができます。浮動ブロックまたはインラインブロックのいずれかである、内部要素（各プログラムに1つ）を試すことができます。フロートは、丸め誤差によってラップされない限り問題ありません。

意味的には、2番目のオプションの方が優れていると思います。あなたが正しく指摘しているように、それはテーブルに非常によく似ているので、テーブルは適切であるはずですが、表示するよりも多くの列を使用し、領域をサイズ変更するためにコルスパンすると、セマンティックアピールが失われます。

データは実際にはテーブルではないことを示したと思います。 CSSに慣れている場合は、CSSを使用してルールをそのように設定するルートをたどることをお勧めします。

たとえば、5分、10分、15分、30分、1時間などのクラスを作成できます。これらの各ルールは、正しい幅を提供するように構成されます。に。それ以外の場合は、その場でサイズを計算できます。

表示しているデータは、実際にはグラフまたは並べ替えのチャートに似ています。これに対応するHTML要素はありません。テーブルのアプローチは理にかなっていると思います。テーブルを1/6に分割することも理にかなっています。 colspanを1.125にできないのは、メディアの制限です。このテーブルはプログラムで生成されるため、各論理セルを6つの物理セルに分割することは大きな問題になるとは思いません。スクリーンリーダーなど、気になる非標準のブラウザでサンプルをテストするだけです。

TVリスティング？リストです...

まあ、これについては重大な意見の相違があります：

だから、あなたが好むものを決定し、選択を取ります...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top