css - カスタムテーブルを作成しようとしています

Question

次のようなテーブルを作成しようとしています。

しかし、私はそれを行う方法がよくわかりません。

最終結果は次のようになります。

div を作成し、div の背景を灰色のテクスチャ部分に設定し、その div 内にテーブルを作成してコンテンツを整理することを計画していました。この状況でテーブルを使用することは正しいですか? それとももっと良い方法がありますか？前もって感謝します。

Answer 1

表以外のマークアップに固執します。今日のベスト プラクティスでは、表形式のデータにのみテーブルを使用することをお勧めします。このコンテンツは表形式のデータではありません。

フロートの使用、インラインブロックの表示など、これを行うために使用できるいくつかの異なる方法があります。画像を囲むコンテンツについても考慮事項があります (たとえば、コンテンツが長い場合)。

しかし、ここにいくつかのサンプル コードがあります。

スタイル:

div.left,
div.right {
    width: 400px;
    overflow: hidden; /* forces the div to clear the floated content */
}

div.left img,
div.right img {
    border: 2px solid #888;
}

div.left img {
    float: left;
    padding-right: 20px;
}

div.right img {
    float: right;
    padding-left: 20px;
}

HTML マークアップ:

<div class="left">
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p>
</div>
<div class="right">
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p>
</div>

Answer 2

テーブルを使用しないと言う嫌いな人にフーイ。これには完全にテーブルを使用します。

<table>
  <tr>
    <td colspan=1><img src="yadayada"></td>
    <td colspan=2>Lorem Ipsum...</td>
  </tr>
  <tr>
    <td colspan=2>Lorem Ipsum...</td>
    <td colspan=1><img src="yadayada"></td>
  </tr>
  <tr>
    <td colspan=1><img src="yadayada"></td>
    <td colspan=2>Lorem Ipsum...</td>
  </tr>
</table>