1

各正方形の幅が画面幅の50％であり、各正方形の間に一定の間隔がある、単純な正方形のグリッドをレイアウトしています。テーブルと1行のJavaScriptを使用してこれを行う非常に直感的な方法を見つけました（ここにフィドルがあります）：

HTML

<table width="100%" cellspacing="10">
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
</table>

JavaScript

$('td').height($('td').width());

これは、テーブルの正気で意味のある使用のように見えますが、表形式のテキストデータ以外の目的でテーブルを使用したことで、仲間のプログラマーに引き裂かれるとほぼ確信しています。上記のアプローチを使用しない正当な理由はありますか？

4

1 に答える 1

1

HTMLに表形式のデータが含まれる場合、テーブルを使用しても問題はないと思います。レイアウトを設計するためだけに使用している場合は、table「通常の」要素（、、divなど）を使用する必要があります。sectionarticle

しかし、私が指摘したいのは、HTML内でレイアウトスタイルを使用しているということです。これは間違っています。デザインをCSS内に配置し、HTMLをクリーンに保つ必要があります。例：

HTML

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width:100%;
    border-collapse: seperate;
    border-spacing : 10px;
}
td {
    width:50%;
    background-color:red;
}

jQuery

$('td').height($('td').width());

JSFiddle。

于 2013-02-26T06:45:09.290 に答える