人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: exever
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:CSS Dreamweaver HTML 画像
○ 状態 :終了
└ 回答数 : 3/5件

▽最新の回答へ

1 ● pahoo
●27ポイント

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


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


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

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

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


参考サイト


2 ● ctrl-v
●27ポイント
<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


3 ● 毒眼鏡
●26ポイント

#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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ