[CSS] HTMLテーブル（表）を使用せずにテーブルを作成する

Last Updated：2023年07月17日| | 6のコメント

概要

テーブルを作成するには、通常のDreamweaverなど、簡単に表を挿入して作成することができます。 しかし、HTMLのテーブルを多く使用すると、速度の面で良くない影響を与えているとね。 だからCSSテーブルを使用することをお勧めします（参照).

簡単に応用できるようにCSSで表を一つ作ってみました。

CSSテーブルのサンプル

HTMLコード：

<div id="table">
<div class="row">
<span class="cell col1">열 1-1</span>
<span class="cell col2">열 1-2</span>
<span class="cell col3">열 1-3</span>
<span class="cell col4">열 1-4</span>
</div>
<div class="row">
<span class="cell col1">열 2-1</span>
<span class="cell col2">열 2-2</span>
<span class="cell col3">열 2-3</span>
<span class="cell col4">열 2-4</span>
</div>
</div>

CSSコード：

#table {display: table; width: 100%;}
.row {display: table-row;}
.cell {display: table-cell; padding: 3px; border-bottom: 1px solid #DDD;}
.col1 { width: 20%;}
.col2 {width: 20%;}
.col3 {width: 40%;}
.col4 {width: 20%;}

結果：

CSS Table- CSSでテーブルを作成

このコードを応用して WordPress カテゴリー文を掲示板形式のリストで実装することができます。 他にも様々な応用が可能でしょう。 個人的には、CSSの表がモバイルで制御するのがより容易と思われる。

ちなみに表は、テキストの長さが長くなる場合ellipsisが正常に動作しません。

td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

この場合、 table-layout을 固定のに指定すると、セルのテキストが長くなる場合は、セルサイズに合わせてテキストを減らすことができます。 しかし、 table-layoutを使用してみると、いくつかのテーブルで表のレイアウトが不要な形で変わる現象が発生しますね。 このような場合は、セルの 最大幅를 0또는 視聴者の３８%がで指定したら、問題が解決しますね。 table-layout：fixedを使用せずにtext-overflowを処理する場合、参考にすればよさそうです（参照).

追加： Matthewさんが言ったように、次のようなTable Generator（表ジェネレータ）を使用すると、より便利にテーブルを作成することができます。

参考までに WordPress プラグインは、ジャス/ jQueryテンプレートは、PHPスクリプトなどのコードを販売する Codecanyonで、メニュースタイル、テーブル（table）などのCSSコードやJavaScriptの/ jQueryテンプレートを購入することができます。 CSSコードスニペットの場合、3ドルから10ドルのサイトで手頃な価格の方です。

Codecanyonで販売されているCSSコード
Codecanyonで販売されているベストセラーCSSコード

メモ：

6のコメント

コメント

  2. 数年前のコンテンツがdataである場合テーブルに組むことがsemanticたことだという主張をして、テーブルの使用が不適切ではないという GNUBOARDで働かれる方の議論を行ったことがあります。

    この主張も間違った主張ではないが、現実的な部分を考慮していないと主張しだったんです。 私のテーブルもdivに組まなければならないと主張していた理由は、、反応型対応のためイオトグヨ。

    rendering速度は以前のブラウザでも、テーブルrenderingが遅いものですが、最近では、大きな違いがありません。 むしろ反応型のコーディングをしなければならてテーブルもdivに絞ることでしょう。

    そして、テーブルチャルテ、ワードさんが紹介される方法のように、手のコーディング（hand coding）する場合は、ないんです、それだけでtable generatorで描くます。

    http://divtable.com/generator/
    http://www.cssbuttoncode.com/table.php

    応答