テーブルタグを使わないでテーブルレイアウトのような表を作成する方法

なんだかんだいってtableタグは便利です。
表を作りたい時なんかはやっぱり重宝しますよね。
でもどうしてもtableタグを使いたくないときはこんな方法があります。

こちらがtableタグで作った表

項目1	数値1-1
	数値1-2
項目2	数値2-1
	数値2-2
項目3	数値3-1
	数値3-2

一応ソースはこちらです。

<table>
<tr>
<td rowspan="2" style="background:skyblue" valign="top">項目1</td>
<td>数値1-1</td>
</tr>
<tr>
<td>数値1-2</td>
</tr>
<tr>
<td rowspan="2" style="background:skyblue" valign="top">項目2</td>
<td>数値2-1</td>
</tr>
<tr>
<td>数値2-2</td>
</tr>
<tr>
<td rowspan="2" style="background:skyblue" valign="top">項目3</td>
<td>数値3-1</td>
</tr>
<tr>
<td>数値3-2</td>
</tr>
</table>

さて、これをdl,dt,ddのタグを使って作成して見ます。

項目1

数値1-1

数値1-2

項目2

数値2-1

数値2-2

項目3

数値3-1

数値3-2

ソースはこちら。

<dl style="background:skyblue">
<dt style="float:left;clear:left;display: block;width:3em;">項目1</dt>
<dd style="background:#fff;margin-left:3em;">数値1-1</dd>
<dd style="background:#fff;margin-left:3em;">数値1-2</dd>
</dl>
<dl style="background:skyblue">
<dt style="float:left;clear:left;display: block;width:3em;">項目2</dt>
<dd style="background:#fff;margin-left:3em;">数値2-1</dd>
<dd style="background:#fff;margin-left:3em;">数値2-2</dd>
</dl>
<dl style="background:skyblue">
<dt style="float:left;clear:left;display: block;width:3em;">項目3</dt>
<dd style="background:#fff;margin-left:3em;">数値3-1</dd>
<dd style="background:#fff;margin-left:3em;">数値3-2</dd>
</dl>

タグに意味を持たせる意味でも、dl,dt,ddを使ったレイアウトの方が良いかな。
ソースも綺麗だし、項目に対する要素が増えたとき、rowspanの数値をいちいちいじらなくていいし。

関連記事

• 関連する投稿はありません。

このブログを書いているsayjiroは最近会社を立ち上げました。小さな小さな会社ですが、一緒に働く仲間を探している今日この頃です。
社員が僕しかいない小規模零細企業ですが、自由に楽しく仕事をしつつWebを使って面白いことができればと思ってます。

募集している人物像：向上心がある・Webともの作りが好き（ある程度経験があると嬉しいですが、未経験でもやる気があれば可です）
お仕事内容：Web周り全般。サイト制作やデザイン、システム構築やiPhoneアプリ開発などいろいろです。
働く形態：その人に合わせて応相談(在宅とかでもいいです)

→興味がございましたらこちらからお気軽にご連絡ください！