締切済み

表とリスト付き順序を両立させることはできますか？

2011/04/01 03:28

順序付きリストがついた、表を作りたいと考えてます。現在は、その方法の一つとしてブロック要素をcssで表化し順序付きリストをその表の列の左側に表示するというようにしたいと考えていました。図で表すとこうなります。　　　A枠　　　　　　　　　B枠 ------------------------------- |1.　(A1)　　　　　　　|　(B1)　　　　　　| ------------------------------- |2.　(A2)　　　　　　　|　(B2)　　　　　　| ------------------------------- |3.　(A3)　　　　　　　|　(B3)　　　　　　| ------------------------------- このようにリストno.100程度まで続く・・問題点はブロック要素を使用すると、リスト付き順序が初期化されてしまうということです。 {(A2)の横には「2.」と着てほしいところが初期化されたため「1.」と表示される} どのようにすれば、表とリスト付き順序を共存させることができますか？もしくは他の方法で、表とリスト付き順序を共存させることができますか？

cococo363
お礼率37% (3/8)

HTML
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/04/08 10:57 回答No.3

そもそものHTMLのマークアップが示されていないのでCSSは示すことが不可能です。 HTML/CSSで重要なことは、「HTMLが文書構造にしたがって正しくマークアップされているか」です。　(A1)～(A100)，(B1)～(B100)はそもそもどんな要素(Element)なのでしょう。　最も簡単なのは、Lynxなどのテキストブラウザで表示させてみるとか・・ <dl>・・・定義リスト・・・　<dt>A1</dt> 　<dd>B1</dd> ・・・・・ </dl> あるいは <div> 　<h3>A1</h3> 　<div> 　　<p>B1</p> 　</div> </div> 　上記いずれでも、あるいは他のマークアップでも期待通りのプレゼンテーションはできます。ただし、HTML(Hyper Text Marup Lungage)の文字通り正しくマークアップされていればということです。　スタイルシートを適用する前の文書の構造に従ったマークアップを提示してください。　

Yama-tani
ベストアンサー率44% (13/29)

2011/04/03 10:33 回答No.2

>ブロック要素をcssで表化し順序付きリストをその表の列の左側に表示するを可能の文章構造的に解釈すると、まずはリストがあり、その中にブロック要素を入れると取れます。 olの直接の子はliでないと駄目ですし、olが親を飛び越えることはできません。こんな感じでいかがでしょう。 css ----------- ol{width:20em;} div{float:right;} div div{width:10em;float:left;} html ----------- <ol> <li><div> <div>(A1)</div> <div>(B1)</div> </div></li> <li><div> <div>(A2)</div> <div>(B2)</div> </div></li> <li><div> <div>(C1)</div> <div>(C2)</div> </div></li> </ol>

fujillin
ベストアンサー率61% (1594/2576)

2011/04/01 12:17 回答No.1

よくわかってませんが、こんなんじゃダメなのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .column { width:200px; float:left; } ol { margin: 0; padding: 0; line-height: 1.5em; list-style: none; border-top: 1px solid #888; } ol.first { list-style: decimal inside; border-left: 1px solid #888; } ol li { padding-left: 1em; border-right: 1px solid #888; border-bottom: 1px solid #888; } </style> </head> <body> <div class="column"> <ol class="first"> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> </ol> </div> <div class="column"> <ol> <li>B1</li> <li>B2</li> <li>B3</li> <li>B4</li> </ol> </div> </body> </html>