66

[注: この質問を「HTML レイアウトにテーブルを使用しない理由」と混同している可能性がある人のために、私はその質問をしていません。私が求めているのは、なぜグリッド レイアウトがテーブル レイアウトと根本的に異なるのかということです。]

プロジェクトの CSS ライブラリ (特に Bootstrap) を調査しています。私は Web デザイナーではなくプログラマーであり、優れたデザインをカプセル化したライブラリーの恩恵を受けることができると感じています。

基本的なサイト レイアウトを実現するために HTML テーブルを使用するのは、プレゼンテーションとコンテンツが混在するため、不適切な方法であることは誰もが知っています。Bootstrap などの CSS ライブラリが提供する利点の 1 つは、テーブルを使用せずに「グリッド」レイアウトを作成できることです。ただし、グリッド レイアウトが同等のテーブル レイアウトと意味のある点でどのように異なるかを理解するのに少し苦労しています。

言い換えれば、これら 2 つの HTML の例の根本的な違いは何でしょうか? グリッド レイアウトが単に別の名前のテーブルであると考えるのは間違っていますか?

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

と

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
4

9 に答える 9

33

違いは、マークアップされるデータが実際には表形式ではないことを前提として、最初の例がセマンティックにマークアップされていることです。表形式のデータ<table>にのみ使用し、表のようなレイアウトで表示されるデータには使用しないでください。

ただし、Bootstrap などの CSS パッケージを使用すると、セマンティックではなく表示用のHTML 要素にクラスを割り当てる必要があるため、コンテンツと表示の分離が少なくなり、違いがやや不明確になることは間違いありません。意味的に意味のあるクラスを要素に割り当て、lesscss ミックスイン (または同様の技術) を使用して、CSS フレームワークで定義された表示動作をこれらのクラスに割り当てる必要があります。表示クラスを要素に直接割り当てるのではありません。

言う：

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

私がすべきだと言っていることに注意してください。実際には、これが常により実行可能なオプションであるとは限りませんが、理論的な目標であるべきです。

于 2013-01-22T14:47:55.837 に答える
20

私はCBroe のコメントが最良の選択肢であると信じているので、明確にすることにしました。

を避けてくださいdiv。Adivは最初のオプションではなく、最後の手段にする必要があります。代わりに、実際の要素で Bootstrap クラスを使用してみてください。例えば：

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

単一のフィールドを含めるために fieldset を使用するのは残念ですがdiv、同じものに a を使用するよりも意味的に最適です。articleHTML5 標準では、section、header、など、多くの新しいコンテナ要素が定義されてfooter います。場合によっては を使用する必要がありますが、使用divを最小限に抑えると、コードはよりセマンティックになります。

于 2014-05-09T13:21:32.353 に答える
4

ページ レイアウトには Bootstrap グリッドを使用し、表形式のデータにはテーブルを使用します。

Bootstrap のグリッドは、開発者のグリッド ビュー コントロールのようなものではなく、デザイン ページ レイアウトの意味で、ページ コンテンツを含むグリッドとして考えています。また、Bootstrap グリッドを使用して表形式のデータを含む従来のグリッドを作成することもできますが、deceze が指摘したように、この種のグリッドは HTML テーブルに適しています。

于 2013-02-12T22:54:31.360 に答える
3

テーブルのみを使用する場合、デバイスごとに個別のページを作成しなくても、モバイル/タブレット用にドキュメントのサイズを変更する柔軟性が失われると思います。テーブル構造が定義されたら、実際にできることはズームインとズームアウトだけです。

于 2013-01-23T00:15:54.580 に答える
1

よろしければ、他のコメントから集めたものと、このページで経験したリンク爆発を要約したいと思います。

テーブルを使用する際の問題は、グリッド レイアウトではなく、CSS ではなく HTML で表現しようとする試みです。

Bootstrap では、(ほとんどの場合) 純粋な CSS を介してグリッド レイアウトを使用できるため、問題ありません。「ほとんど」の部分は、HTML がまだレイアウト データによって汚染されているために発生しますが、より微妙です。

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

これは確かに古い表形式のデザインよりもはるかにセマンティックで保守しやすいものですが、「span4」と「span8」は依然として HTML に埋め込まれた表示データです。ただし、デザインをデータから真に分離することはできないため (ネストされた div など)、これは妥当な代償です。

そうは言っても、 LESSなどの前処理された言語によって提供される最新の CSS 機能を使用すると、この結合でさえ壊れる可能性があります。同じ例:

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

次の LESS と組み合わせる:

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

これにより、完全に分離された HTML とスタイルシートが作成されます。これは理想的です。これは、HTML がよりクリーンで読みやすくなり、HTML の変更を少なくして再設計を行うことができるためです。ただし、CSS は現在ミックスイン (AFAIK) をサポートしていないため、これは LESS またはその他の CSS プリプロセッサを使用する場合にのみ機能します。

私の職場ではすでに LESS を使用しているので、このタイプのソリューションの使用を推し進めていくことはわかっています。私はセマンティック HTML とデータ設計の分離を強く信じています。:)

于 2015-02-13T18:42:37.063 に答える
0

基本的に、DIV は DIV であり、テーブル要素は単なるテーブル要素です。テーブルの問題は、最終的には厳密なデータ構造であるため、多くの場合、すべての列と行を追跡することです。DIV ははるかに柔軟で寛容です。

たとえば、"span4" に等しいクラスを持つ 4 つの DIV を取得し、それらを 2 列幅に変更したい場合は、外側のクラス "row" の CSS を少し調整するだけで済みます。おそらくクラス「span4」。実際、このような DIV を行うときは、個々の DIV を「span4」またはその他の番号と呼ぶことは避けます。

私のアプローチは、「rowspan」と呼ばれる親ラッパー DIV を作成することであり、内部 DIV には「セル」などの汎用 ID があります。

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

たとえば、各「セル」クラスの幅が 100 ピクセルの場合、親の「行スパン」は 400 ピクセルになります。これは、行の 4 列に相当します。2列にしたいですか？問題ない！「rowspan」を 200 ピクセル幅に変更するだけです。この時点では、すべて CSS で作成されているため、DOM でページ構造を再調整することなく簡単に行うことができます。

しかし、テーブルで？簡単ではありません。</tr><tr>新しい行を作成するには、基本的にタグを使用してテーブルを再レンダリングする必要があります。

于 2013-01-22T14:49:58.987 に答える
0

table、tr、td を含むバージョンは、ブラウザーのアルゴリズム (ラッピング、動的幅、マージン、センタリングなど) に依存します。div を含むバージョンは、css とスクリプトによってより簡単に調整できます。

于 2016-09-05T13:11:40.383 に答える