dl dt dd　を使用してテーブルのように使う

実は，tableタグを使わず，「DL」タグを使って表組みを実装すれば，

上記のような変更はCSSをちょっと書き変えるだけで実現できる。

つまり，「縦並び」「横並び」を柔軟に切り替えできるような，

変更しやすい表組みレイアウトを実現できるのだ。

そうすれば，HTMLは，純粋に「文書の構造」だけを表す。

CSSは「見せ方」を自由に切り替えるために使う。

なので，table要素で表組みする際の矛盾を避けられる。

横並び

<html>
<head>
<title>dl, dt, dd でテーブルレイアウトをするテスト</title>
</head>
<body>


<style>

dl, dt, dd {
margin : 0;
padding : 0;
}

dl {
/* dlの背景色をdt用に使う。区切り線はdtの上部に持たせる */
background-color : yellow;

/* dlの上部線はなくし，dtとddの上部線をdlの上部線のように見せる */
border-width : 0 1 1 1;
border-style : solid;
border-color : black;

width : 40%;
}

dt {
float : left;
clear : both;
width : 150px;

border-width : 1 0 0 0; /* 上線だけ */
border-style : solid;
border-color : black;

font-weight : bold;
padding : 5px;
}

dd {
/* dtの幅だけ横にずらしておく */
margin-left : 150px;

/* dlやdtとは異なった背景色を用いる */
background-color : white;

border-width : 1 0 0 1; /* 上線と，dt・ddの左右間の区切り */
border-style : solid;
border-color : black;

padding : 5px;
}

</style>


<dl>
<dt>Windows</dt>
<dd>
米マイクロソフト社が開発したOS。<br>
全OSシェアの90％を占める，デファクトスタンダードのオペレーティングシステム。<br>
（※<a href="http://news.mynavi.jp/news/2011/01/04/029/index.html">2010年末時点</a>）
</dd>

<dt>Mac</dt>
<dd>
米アップル社が開発したOS。<br>
全OSシェアの5％を占める。（出典は同上）<br>
しかし，デザイナーやクリエイティブ系の業務においてはMacは必需品であり，決して侮ってはいけない。<br>
（※<a href="http://q.hatena.ne.jp/1137545476">参考</a>）
</dd>

<dt>その他</dt>
<dd>
色々あるでよ
</dd>

</dl>

</body>
</html>

縦並び

<html>
<head>
<title>dl, dt, dd でテーブルレイアウトをするテスト</title>
</head>
<body>


<style>

dl, dt, dd {
margin : 0;
padding : 0;
}

dl {
/* dlの背景色をdt用に使う。区切り線はdtの上部に持たせる */
background-color : yellow;

/* dlの上部線はなくし，dtとddの上部線をdlの上部線のように見せる */
border-width : 0 1 1 1;
border-style : solid;
border-color : black;

width : 40%;
}

dt {
/* float : left; */
/* clear : both; */
/* width : 150px; */
width : 100%;

border-width : 1 0 0 0; /* 上線だけ */
border-style : solid;
border-color : black;

font-weight : bold;

/* paddingを設定するとdtがdlの横幅をはみ出すので，かわりにindentを使う */
/* padding : 5px; */
text-indent : 5px;
}

dd {
/* margin-left : 150px; */

/* dlやdtとは異なった背景色を用いる */
background-color : white;

/* border-width : 1 0 0 1; */
border-width : 1 0 0 0; /* 上線だけ */
border-style : solid;
border-color : black;

padding : 5px;
}

</style>


<dl>
<dt>Windows</dt>
<dd>
米マイクロソフト社が開発したOS。<br>
全OSシェアの90％を占める，デファクトスタンダードのオペレーティングシステム。<br>
（※<a href="http://news.mynavi.jp/news/2011/01/04/029/index.html">2010年末時点</a>）
</dd>

<dt>Mac</dt>
<dd>
米アップル社が開発したOS。<br>
全OSシェアの5％を占める。（出典は同上）<br>
しかし，デザイナーやクリエイティブ系の業務においてはMacは必需品であり，決して侮ってはいけない。<br>
（※<a href="http://q.hatena.ne.jp/1137545476">参考</a>）
</dd>

<dt>その他</dt>
<dd>
色々あるでよ
</dd>

</dl>

</body>
</html>

dl dt dd を使用してテーブルのように使う

dl dt dd　を使用してテーブルのように使う