8

これは、 「レイアウトにテーブルを使用しない理由」の質問のような、別の一般的な「一般的なレイアウトのテーブルと div 要素」タイプの質問ではありません。

私はタイムテーブル/カレンダープロジェクトに取り組んでおり、カレンダーはいつテーブルを使用するかの例であると常に想定してきました。<td>Google カレンダーの構造をざっと見てみると、各列と各列内に forを含むテーブルで構成されているように見えますが、イベントは<div>内部に定義リストがあります。

なぜこれが有益なのですか？

私自身のアイデア:

  • 複数の異なる長さのイベントが同時に開始される (同じ で開始される) 場合、テーブルを適切かつコンパクトにスタイルするのはより面倒な場合があります<td>。不要な空白の可能性。
  • ページが読み込まれた後にユーザーがイベントを追加すると、たとえば JavaScript を使用してテーブルを更新するのが難しくなります(テーブル ヘッダーの行/列スパンを変更する必要がある場合があるため)。
  • テーブルが使用されている場合、x 軸/上部のヘッダーとセルの幅、および y 軸/左のヘッダーとセルの高さは自動的に一致します。テーブルなしでこれを管理するのは難しいかもしれません。

これは重要ですか？表形式のデータは常に実際のテーブルに格納する必要がありますか?

以下は、Google カレンダーの列の簡単な例です。

<td> <!-- column -->
        <div> <!-- start event -->
            <dl>
                <dt>START TIME – END TIME </dt>
                <dd>EVENT TITLE</dd>
            </dl>
        </div> <!-- end event -->
</td> <!-- end column -->

以下は完全な例です。

<td class="tg-col"> <!-- column td -->
    <div id="tgCol0" class="tg-col-eventwrapper" style="height:1008px;margin-bottom:-1008px;"> <!-- column div -->
        <div class="tg-gutter">
            <div class="ca-evp130 chip " style="top:588px;left:-1px;width:100%;"> <!-- start event div -->
                <dl class="cbrd" style="height:35px;border-color:#9FC6E7;background-color:#E4EFF8;color:#777777;">
                    <dt style="background-color:;">START TIME – END TIME <i class="cic cic-dm  cic-rcr" title="Recurring event">&nbsp;</i></dt>
                    <dd><span class="evt-lk ca-elp130">EVENT TITLE</span></dd>
                    <div><!-- start masks -->
                        <div class="mask mask-top" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-bottom" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-left" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-right" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                    </div><!-- end masks -->
                    <div class="resizer"> <!-- start resizer -->
                        <div class="rszr-icon">&nbsp;</div>
                    </div> <!-- end resizer -->
                </dl>
            </div> <!-- end event div -->
        </div> 
    </div> <!-- end column td -->
    <div id="tgOver0" class="tg-col-overlaywrapper"></div> <!-- column overlay div -->
</td> <!-- end column td -->

編集：

Google カレンダーがそのままの構造になっている理由を忘れずに含めてください。たとえば、Google カレンダーには表があるのに、それを列にしか使用しないのはなぜですか?

4

3 に答える 3

3

カレンダーを表示するためにテーブルを使用する主な理由は2つあると思います。

  1. 可変高さのセルを持つ行はテーブル内でより単純ですが、フロートとクリアフィックスを使用して同じことを実現できます。テーブルアプローチは壊れない可能性が高く（そして確かに古いブラウザとの互換性が高い）、おそらくブラウザがレンダリングするのにより効率的です。
  2. 複数日にわたるイベントのフローをCSSで管理するのは非常に困難ですが、colspanを使用することで非常に簡単になります（比較的恐ろしく非セマンティックなマークアップが生成される場合でも）。

（StackOverflowの他の場所で、テーブルなしでこれらの目的を達成するための合理的に堅牢でエレガントな方法があるかどうか疑問に思っています。参照：複数日カレンダーイベントのHTMLマークアップ）

于 2012-07-12T14:51:25.387 に答える
3

個人的には、テーブルの代わりに div を使用します。テーブルが完全に間違っていると言っているわけではありません。特に、他の要素 (2 つの日付にまたがる可能性のある会議など) を追加する場合は特に、div の方がスタイリングに関してはるかに柔軟であるということです。

Div は、テーブルよりも流動的なレイアウトにも役立ちます。

それは表形式のデータである場合とそうでない場合の両方です。機能とレイアウトをどこまで取っているかによって異なります。

于 2012-04-08T00:29:16.373 に答える
2

アダム、それは素晴らしい質問です。

カレンダーは実際にテーブルに最適な使い方だと思います。おっしゃる通り、ほとんどの意味でテーブルのスタイルを設定するのは難しいですが、実際の問題について考えると、それはあなたが好むものです。確かに、技術的には div ではなくテーブルを使用して多くの最新の Web サイトを構築できますが、それは非常に難しいことですが、すべてに時間と場所があります。私の意見では、それは好みの問題であり、マークアップの少ないものを書くことができれば、それを使用する必要があります...たとえそれが現代の基準では悪い習慣と見なされていたとしても。

私の投票は、カレンダーと同じくらい正方形で不変のものです...それがより安価な解決策である場合は、テーブルを使用してください.

于 2012-04-08T00:24:05.333 に答える