7

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 でチートしてすべて<th>を作成できるので、サブユニットは 5 分になります。そして、すべてのショーのコルスパンを時間の長さ/5(分)にして遊んでください。それが私のコルスパンです。

しかし（常にしかしがあります）、今私が持っているのは表形式のデータを含むテーブルではなく、ある種のスパゲッティテーブルです。

私は何をすべきか？

4

6 に答える 6

3

これは絶対に <table> で解決すべきものではありません。

複数の <div> を使用し、それぞれに 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>
于 2009-03-09T13:57:08.373 に答える
1

最後に、TV ガイドは厳密にはテーブルではないと判断しました。時間帯を示すヘッダー部分と、時間ごとのショーを示すボディ部分がありますが、ここで表部分が終了します。

リストのリストとしてそれを行います。最初のリストはヘッダーであり、チャネル リストであり、すべての li に別のリストがあり、ヘッダーには時間のリストがあります (各時間は一定の幅を取得します)。残りの 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>

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

于 2009-03-15T12:02:33.433 に答える
1

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

多数の colspans オプションを含むテーブルは、たとえばここで使用されているものです。

基本的に2つの選択肢があると思います。

  • テーブルを使用し、コルスパンを持ちます。限られた時間に対して 1 つの「列」しか持つことができないため、1 時間あたりの列数に応じて、5 分、10 分、または 15 分に丸める必要があり、1 時間のプログラムではあなたが質問で指摘したように、4、6、または 12 の colspan です。
  • プレーン DIV で CSS を使用し (または、本当に必要な場合は、UL と LI、各行の UL とその行の各ブロックの LI にすることもできます)、各項目の幅を個別に指定します。これは、パーセンテージ (行全体を拡大および縮小できるようにする) またはピクセルで行うことができます。浮動ブロックまたはインライン ブロックのいずれかである内部要素、つまり各プログラムに 1 つを試してみることをお勧めします。丸め誤差によって折り返されない限り、フロートは問題ありません。

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

于 2009-03-09T13:36:41.263 に答える
1

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

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

于 2009-03-09T13:42:12.013 に答える
0

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

于 2009-03-09T13:40:55.543 に答える
0

テレビのリスト？それはリストです...

実際には、これにはいくつかの深刻な意見の相違があります。

だから、あなたが好むものを決めて、あなたの選択をしてください...

于 2009-03-09T14:00:01.970 に答える