6個のキーと6個の値を含むキー値リストがあるとします。私はこれらのキー、値のペアをHTMLで表形式の方法（プレゼンテーション）でレンダリングしたいと思いますが、必ずしも表形式のデータではありません。したがって、HTML <table>タグは、次の2つの理由で推奨されません。テーブルレス設計では、非タブーデータを価値のある表形式のスタイルで表示できますか？
- データとの表示が分離されている必要があります。
<table>タグは、表形式のデータの場合のみ、表示目的で使用しないでください。
とにかく、基本的な考え方は非常に単純に次のようなこれらの値を提示することである。
これは非常に簡単にHTML/CSSと<table>タグで達成されます。サンプルコードが提供される：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
table {
width: 300px;
border: solid 1px black;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>Key 1</td><td>Val 1</td><td>Key 4</td><td>Val 4</td></tr>
<tr><td>Key 2</td><td>Val 2</td><td>Key 5</td><td>Val 5</td></tr>
<tr><td>Key 3</td><td>Val 3</td><td>Key 6</td><td>Val 6</td></tr>
</table>
</body>
</html>
： 
コモン表なしこのような構造のデザインは、CSS floatスタイルと、<ul>と<li>要素の組み合わせによるものです。
サンプルコードは、このアプローチのために与えられる：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
.table {
width: 300px;
border: solid 1px black;
}
.table ul {
float: left;
list-style: none;
padding-left: 0px;
}
.table ul li {
width: 75px;
text-align: center;
margin: auto;
}
.clear {
clear: both;
}
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
</style>
</head>
<body>
<div class="table cf">
<ul>
<li>Key 1</li>
<li>Key 2</li>
<li>Key 3</li>
</ul>
<ul>
<li>Val 1</li>
<li>Val 2</li>
<li>Val 3</li>
</ul>
<ul>
<li>Key 4</li>
<li>Key 5</li>
<li>Key 6</li>
</ul>
<ul>
<li>Val 4</li>
<li>Val 5</li>
<li>Val 6</li>
</ul>
</div>
</body>
</html>
それは規定として働き、そしてあまりにも現在のブラウザでZOOM作品。 （IE6では、テキストのズームがすべてのものをプッシュしない限り、それは混乱している）。
私にはそれが直感的にするものの数があります。
- より多くのCSSを使用すると、各キーが続く順序で提示したい考えアクセシビリティを理想的には、特にclearfix
- ために、必要とされます各値、ここでは3つのキー、3つの値、3つのキー、3つの値を取得します。これは、CSSなしでこのオプションをレンダリングするのはかなり奇妙に見えますが、CSSなしのテーブルはまだ理にかなっています。
だから、基本的には、質問がに沸く：テーブルは非表形式のデータを提示する際に同じスタイルを模倣する<ul>、複雑な山車や他のCSSのトリックを使用しようとする理由を表形式のスタイルで情報を提示するので、よく遊ぶので、表のようなファッション？すべてのHTMLから<table>を取り除こうとすると、ここの大きな利点は何ですか？
EDIT 私は、これは元の質問オフビットを取得している知っているが、いくつかの答えは、それがより意味的に正確にするために<dl>の使用を示唆しました。同意する。だから、そのアプローチのためのサンプルコードは、以下の：どのような面倒であることは、この二つの別々の定義リストを達成するために作成されていることである、しかし
：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test 1</title>
<style type="text/css">
.table {
width: 300px;
border: solid 1px black;
}
.table dl {
float: left;
padding-left: 0px;
width: 150px;
}
.table dl dt, .table dl dd {
width: 75px;
text-align: center;
float: left;
margin: 0px;
}
/* clear fix is below */
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
</style>
</head>
<body>
<div class="table cf">
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
<dt>Key3</dt>
<dd>Value3</dd>
</dl>
<dl>
<dt>Key4</dt>
<dd>Value4</dd>
<dt>Key5</dt>
<dd>Value5</dd>
<dt>Key6</dt>
<dd>Value6</dd>
</dl>
</div>
</body>
</html>
をこれはまだ同じ視覚効果を取得します。実際に、それはちょうど1つのリストであると仮定した場合：
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
<dt>Key3</dt>
<dd>Value3</dd>
<dt>Key4</dt>
<dd>Value4</dd>
<dt>Key5</dt>
<dd>Value5</dd>
<dt>Key6</dt>
<dd>Value6</dd>
</dl>
分割を含めるする唯一の理由は、プレゼンテーションの目的のためでした。あなたはどうやってこれを回避しますか？
あなたはその決済部門を必要としません。浮動小数点をクリアする他の方法があります。 960.gsやBlueprint-cssのような多くのCSSフレームワークで '.clearfix'クラスを見てください。 – prodigitalson
代わりにclearfixメソッドを使用するようにサンプルを更新しました。 – user17753
単一の 'dl'のスタイリングについて：[CSS3には、これを解決する方法があります]（http://www.w3.org/TR/css3-multicol）：column-count。基本的に、スタイリングは 'dl {column-count：2; } dt、dd {float：left;幅：50％;マージン：0; } '。これは、CSS3の設計者がユースケースを理解していることを示しています。しかし、これを試してみると、動作しないことがわかります。現代のFirefoxとChromeで、 '-moz-'と '-webkit-'をそれぞれ 'column-count'の前に追加するようにすることができますが、他のブラウザはまだそうではありません... – Alohci