Eiji

2011年8月10日

dl、dt、dd と CSS で表組み(テーブル)を作る


<table>=悪。 というか、ただの表組みでも <table> を使わない風潮?
なので、<dl>、<dt>、<dd> と CSS で表組み(テーブル)を作る方法をメモメモ。

1. TYPE-1


DEMO (TYPE-1)

項目1
項目1の内容です。
項目2
項目2の内容です。
項目3
項目3の内容です。項目3の内容です。項目3の内容です。

HTML + CSS (TYPE-1)

<!-- CSS -->
<style>
dl#sample1 dl,dt,dd {
	margin: 0;
	padding: 0;
}

dl#sample1 dl {
	background: #e7e7e7;
	border: 1px solid #333;
	border-top: none;
	width: 300px;
}

dl#sample1 dt,dd {
	padding: 3px;
}

dl#sample1 dt {
	border-top: 1px solid #333;
	clear: left;
	float: left;
	width: 80px;
}

dl#sample1 dd {
	background: #fff;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	margin-left: 80px;
}
</style>

<!-- HTML -->
<dl id="sample1">
<dt>項目1</dt>
<dd>項目1の内容です。</dd>
<dt>項目2</dt>
<dd>項目2の内容です。</dd>
<dt>項目3</dt>
<dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd>
</dl>

2. TYPE-2 - 「dt」に高さがある場合


<dt> の方が高さが有る時の <dt>、<dd> を横並び

DEMO (TYPE-2)

sample2-1
sample2-1 の画像です
sample2-2
sample2-2 の画像です

HTML + CSS (TYPE-2)

<!-- CSS -->
<style>
dl#sample2 {
	border: 1px solid #333;
	border-top: none;
	width: 300px;
}

dl#sample2 dt {
	border-top: 1px solid #333;
	position: absolute; /* 絶対配置指定 */
	width: 60px;
}

dl#sample2 dd {
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	height: 60px; /* min-height 非対応の IE 用 */
	margin-left: 60px;
}

body dl#sample2 dd {
	min-height: 60px; /* 高さの最小値(画像の高さ+行間?値) */
}

dl#sample2 dd.last { /* 最後の dd には行間?は必要ないため */
	height: 60px; /* min-height 非対応の IE 用 */
}

body > dl#sample2 dd.last {
	min-height: 60px; /* 高さの最小値(画像の高さ) */
}
</style>

<!-- HTML -->
<dl id="sample2">
<dt><img src="20110810s2-1.gif" alt="sample2-1"></dt>
<dd>sample2-1 の画像です</dd>
<dt><img src="20110810s2-2.gif" alt="sample2-2"></dt>
<dd>sample2-2 の画像です</dd>
</dl>

3. TYPE-3


DEMO (TYPE-3)

項目1
項目1の内容です。
項目2
項目2の内容です。
項目3
項目3の内容です。項目3の内容です。項目3の内容です。

HTML + CSS (TYPE-3)

<!-- CSS -->
<style>
dl#sample3 {
	border: 1px solid #333;
	border-top: none;
	width: 300px;
}
dl#sample3 dt{
	border-top: 1px solid #333;
	float: left;
	width: 5em;
}

dl#sample3 dd{
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	_height: 1%; /* WinIEで頭の文字が右に微妙にずれるのを補正 */
	margin-left: 5em;
}
</style>

<!-- HTML -->
<dl id="sample3">
<dt>項目1</dt>
<dd>項目1の内容です。</dd>
<dt>項目2</dt>
<dd>項目2の内容です。</dd>
<dt>項目3</dt>
<dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd>
</dl>

4. TYPE-4 - 「:after」で区切ったやり方


DEMO (TYPE-4)

項目1
項目1の内容です。
項目2
項目2の内容です。
項目3
項目3の内容です。項目3の内容です。項目3の内容です。

HTML + CSS (TYPE-4)

<!-- CSS -->
<style>
#sample4 dl:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}

#sample4 dt {
	clear: left;
	float: left;
	width: 5em;
	font-weight: bold;
	padding: 0.1em 0; /* dt と dl の 「padding:」 上下を揃えないと微妙にずれる */
	text-align: right;
}

#sample4 dt:after {
    content: ":";
}

#sample4 dd {
	float: left;
	padding: 0.1em 0; /* dt と dl の 「padding:」 上下を揃えないと微妙にずれる */
}
</style>

<!-- HTML -->
<div id="sample4">
<dl>
<dt>項目1</dt>
<dd>項目1の内容です。</dd>
<dt>項目2</dt>
<dd>項目2の内容です。</dd>
<dt>項目3</dt>
<dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd>
</dl>
</div>

5. TYPE-5 - 番外編「div」を使ったやり方


チョット例外だけど、
<dl> <dt> <dd> じゃなくて、 <div> を使ったバージョン。

DEMO (TYPE-5)

項目1
項目1の内容です。
項目2
項目2の内容です。
項目3
項目3の内容です。項目3の内容です。項目3の内容です。

HTML + CSS (TYPE-5)

<!-- CSS -->
<style>
.sample5_table {
	border: 1px solid #333;
	border-top: none;
	display: table;
}

.sample5_tr {
	display: table-row;
}

.sample5_th,
.sample5_td {
	display: table-cell;
	padding: 2px;
}

.sample5_th {
	background: #e7e7e7;
	border-top: 1px solid #333;
	font-weight: bold;
	padding: 0 0.5em;
}

.sample5_td {
	background: #fff;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
}
</style>

<!-- HTML -->
<div class="sample5_table">
<div class="sample5_tr">
<div class="sample5_th">項目1</div>
<div class="sample5_td">項目1の内容です。</div>
</div>
<div class="sample5_tr">
<div class="sample5_th">項目2</div>
<div class="sample5_td">項目2の内容です。</div>
</div>
<div class="sample5_tr">
<div class="sample5_th">項目3</div>
<div class="sample5_td">項目3の内容です。項目3の内容です。項目3の内容です。</div>
</div>
</div>


関連記事


Web制作・記事一覧