以下のテーブルHTMLをCSS化したいのですが、ちょいと複雑な為どうやったらいいか

さっぱりわかりません。 誰か助けてください。
以下はDreamWeaverで形成しました。

<table width='100%' height='22%' border='1' cellpadding='3' cellspacing='0'>
<tr>
<td width="20%" rowspan='3'>画像</td>
</tr>
<tr>
<td width="24%"><div align="center">XXX</div></td>
<td width="21%"><div align="center">YYY</div></td>
<td width="35%"><div align="center">ZZZ</div></td>
</tr>
<tr>
<td><div align="center">XXX-2</div></td>
<td><div align="center">YYY-2</div></td>
<td><div align="center">ZZZ-2</div></td>
</tr>
<tr>
<td height="34" colspan='4'>説明文XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
</tr>
</table>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/08/18 15:40:13
  • 終了:2008/08/25 15:40:08

回答(5件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332008/08/18 15:59:01

ポイント27pt

コメント欄に書き込めないので、回答欄にて失礼します。


何を CSS にしたいのでしょうか?


各セルの center 属性を CSS にしたいなら、

#cell_center {
    test-align: center;
}
<td id="cell_center">XXX</td>

のように記述すれば、セル内をセンタリングします。


参考サイト

id:ctrl-v No.2

ctrl-v回答回数289ベストアンサー獲得回数152008/08/18 16:09:48

ポイント27pt
<div style="border:solid 1px #000">
<div style="float:left;width:25%">
画像
</div>
<div style="float:left;width:25%;border-left:solid 1px #000">
<div style="border-bottom:solid 1px #000">xxx</div>
<div>xxx-2</div>
</div>

<div style="float:left;width:25%;border-left:solid 1px #000">
<div style="border-bottom:solid 1px #000">yyy</div>
<div>yyy-2</div>
</div>

<div style="float:left;width:25%;border-left:solid 1px #000">
<div style="border-bottom:solid 1px #000">zzz</div>
<div>zzz-2</div>
</div>
<div style="clear:both"></div>
<div style="width:100%;border-top:solid 1px #000">
説明文XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>

スタイルシートでも記述できますが、あまり融通は利きません。

tableを記述するには、tableタグを利用した方が絶対楽です。

tableの装飾のみスタイルシートに任せた方がいいですね。

http://www.motchie.com/article/multicolumn.html

id:do9iigane No.3

毒眼鏡回答回数3ベストアンサー獲得回数02008/08/18 20:44:49

ポイント26pt

#html



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=xxx">
<title>xxx</title>
<link rel="stylesheet" href="./test.css" type="text/css" />

</head>
<body>

<table class="test" cellpadding='3' cellspacing='0'>
<tr>
<td class = "a" rowspan='3'>画像</td>
</tr>
<tr>
<td class = "b"><p class="test">XXX</p></td>
<td class = "c"><p class="test">YYY</p></td>
<td class = "d"><p class="test">ZZZ</p></td>
</tr>
<tr>
<td><p class="test">XXX-2</p></td>
<td><p class="test">YYY-2</p></td>
<td><p class="test">ZZZ-2</p></td>
</tr>
<tr>
<td class="e" colspan='4'>説明文XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
</tr>
</table>

</body>
</html>


#CSS


@CHARSET "xxx";

table.test {
	width: 100%; height =22%;
	border-width: 1px;
	border-style: solid;
}

td {
	border-width: 1px;
	border-style: solid;
}

td.a {
	width: 20%;
}

td.b {
	width: 24%;
}

td.c {
	width: 21%;
}

td.d {
	width: 35%;
}

td.d {
	height: 34;
}

p.test {
	text-align: center;
}


こんな感じでどうですかね。

外枠(table)だけ線を引きたければtdの以下をコメントアウトしてください。

border-width: 1px;

border-style: solid;

http://www.stylish-style.com/csstec/basic/b-table-deco.html

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 pntswrks 12 10 1 2008-08-19 01:31:22
2 ken33jp 928 793 13 2008-08-20 22:55:23

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません