• 締切済み

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>

画像を拡大する
  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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)
回答No.1

＞<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

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する