みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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>

投稿日時 - 2011-01-18 23:11:28

QNo.6458097

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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 )
でチェック済み!!!

投稿日時 - 2011-01-20 00:23:41

ANo.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

投稿日時 - 2011-01-19 02:32:03

あなたにオススメの質問