- 締切済み
htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLが無茶苦茶ですよ。<body>のあとに</head>があるなど・・。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より そんな複雑なこと書かなくても・・もっとシンプルに書けばよいです。 たとえば、同じ指定(2px solid #330;)とかを何度も書かない!!後でメンテナンスが大変になる。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- table.test{ width:500px; border-collapse:collapse; border:1px solid #333300; } table.test tbody th, table.test tbody td{ border:2px solid #333300; font-weight:normal; vertical-align:middle; padding: 5px; } table.test tbody th{ color:white; background-color:#333300; padding: 30px 5px; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>テスト</h1> <table summary="test" class="test"> <tbody> <tr> <th abbr="title"> 見出し </th> <td> ああああああああああああああ </td> </tr> </tbody> </table> </body> </html> でよい。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済み!!!
- LOHA
- ベストアンサー率52% (203/388)
＞<div class="a1"> a1を指定すべきなのはtableの方じゃないですか？ それと、border-spacingはIE7以下が未対応です。 border-collapse: collapseにした方が良いかと思います。 http://www.htmq.com/style/border-spacing.shtml http://www.htmq.com/style/border-collapse.shtml
