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

Question

exever

2

2もっと見る

80pt

はてなの使い方ウェブ制作

以下のテーブル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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

pahoo · Answer 1 · 2008-08-18T15:59:01+09:00

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

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

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

#cell_center {
    test-align: center;
}

<td id="cell_center">XXX</td>

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

参考サイト

とほほのスタイルシート入門

ctrl-v · Answer 2 · 2008-08-18T16:09:48+09:00

<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

毒眼鏡 · Answer 3 · 2008-08-18T20:44:49+09:00

#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

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

回答（5件）

pahoo59606332008/08/18 15:59:01

参考サイト

ctrl-v289152008/08/18 16:09:48

毒眼鏡302008/08/18 20:44:49

質問者が未読の回答一覧

コメント（0件)

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