 Re: 表の列をグループ化して他の列と設定を変えたいのですが。 ( No.1 ) |
- 日時： 2009/12/06 13:04
- 名前： ｐｂ
- </hd>←この閉じタグは修正してもらうとして。
hp.css内にある以下の設定が原因では？。
tbody {
background-color: #ffffff;
}
|
| hp.css内のtbodyの背景色設定はこれですが。 ( No.2 ) |
- 日時： 2009/12/06 14:48
- 名前： けん
- </hd>を
</ht>に修正しておきました。
また、
<TITLE>男子の部</TITLE>
</HEAD>
の後の
<BODY bgcolor="#ffffff">
は、スタイルシートで定義されているので削除しました。
hp.css内の記述は、次のとおりです。
hr {
color: #ff0000;
height: 7px;
}
h1 {
color: #ff0000;
}
h2 {
color: #008000;
}
h3 {
color: #0000ff;
}
h4 {
color: #990099;
}
caption {
color: #008000;
font-size:30px;
}
table {
border-collapse:collapse;
border: 1px #000000 solid;
border-width: thin;
width: 100%;
height: 150px;
}
thead {
background-color: #c0c0c0;
}
th {
border: 1px #000000 outset;
font-size: 15px;
color: #000000;
}
tbody {
background-color: #ffffff;
}
td {
border: 1px #000000 solid;
font-size:15px;
color: #000000;
}
p {
margin: 12px 12px 12px 12px;
color: #808000;
font-size:15px;
}
body {
margin: 12px 12px 12px 12px;
background-color: #ffffff;
font-size: 15px;
color: #008000;
}
以上のとおりです。
tbody {
background-color: #ffffff;
}
となっています。
スタイルシート上では、表の本文の背景色は、白に定義してあります。
しかし、このページでは、背景色を変えたいので、
<colgroup span="1" width="700" style="background-color: #008000;">
</colgroup>
<colgroup span="1" width="25%" style="background-color: #008000;">
</colgroup>
を設定しました。
しかし、反映できないのです。
|
| Re: 表の列をグループ化して他の列と設定を変えたいのですが。 ( No.3 ) |
- 日時： 2009/12/06 16:28
- 名前： ｐｂ
- 参照： みやさんの返信を参考にしてください。私の返信はなかったことにでよろしくです。
- >>2
> </hd>を
> </ht>に修正しておきました。
修正するなら </td> にしないと。
URL欄のアドレスにアクセスしてください。（後で消します）
こうしたいということではないのですか？。
先の返信に書いたように
hp.css の
tbody {
background-color: #ffffff;
}
をコメントアウト、または、消してしまえばいいと思うのですが。
bodyに背景色 白を指定しているし、必要ないのでは？。
おいらの勘違い返信の時は申し訳ないでごわす。
|
| Re: 表の列をグループ化して他の列と設定を変えたいのですが。 ( No.4 ) |
- 日時： 2009/12/06 16:05
- 名前： みや
- > colgroupというのは、スタイルシートで設定することはできないようなので
いえ、設定できますよ。
> スタイルシート上では、表の本文の背景色は、白に定義してあります。
> しかし、このページでは、背景色を変えたいので
スタイルシートのclassなどで細かく設定できますので試してみては？
tbody の色指定を外した状態で、
■CSS
table colgroup{padding:3px;}
/* 背景に着色する行・列 */
table colgroup.test1{background:#008000;width:75%;}
table colgroup.test2{background:#00f000;width:25%;}/* 区別のために色を変えていま */
/* 背景色は白の行・列 */
table colgroup.test3{background:#444;width:75%;}/* 区別のために色を変えています */
table colgroup.test4{background:#ffffff;width:25%;}
■HTML
<table>
<caption>男子の好きな食べ物</caption>
<colgroup class="test1"></colgroup>
<colgroup class="test2"></colgroup>
<thead>
<tr>
<th>理 由</th>
<th>名 前</th>
</tr>
</thead>
<tbody>
<tr>
<td>ソフトクリーム。バニラの香りは、大人の香りですね。</td>
<td>華男</td>
</tr>
</tbody>
</table>
<table>
<caption>男子の好きな食べ物2</caption>
<colgroup class="test3"></colgroup>
<colgroup class="test4"></colgroup>
<thead>
<tr>
<th>理 由</th>
<th>名 前</th>
</tr>
</thead>
<tbody>
<tr>
<td>ソフトクリーム。バニラの香りは、大人の香りですね。</td>
<td>華男</td>
</tr>
</tbody>
</table>
※テストページ http://zxcvb.zatunen.com/
|
| colgroupで背景色を反映できました。 ( No.5 ) |
- 日時： 2009/12/06 21:08
- 名前： けん
- みなさん、たいへんありがとうございます。
まず、</td>に修正する件はすべて直しておきました。
次に、hp.css の
tbody {
background-color: #ffffff;
}
の背景色の設定を削除しました。
bodyに記述されていれば、あえてtbodyに記述しなくてよかったのですね。
今回の事例では、文字色が緑系で、背景色も緑だったため、この
状態をWEB上で確認すると、tbody部分が緑で塗りつぶされてしまいます。
また、失敗してしまったかと一瞬思ってしまいましたが、背景色の設定
を白と薄黄緑にしてみて、再度、確認したところ、思いどおりの結果を
得ることができました。
たいへんありがとうございました。感激です。
さて、classを用いた方法もすばらしいですね。
お手本を見て、あっと思いました。
実は、スタイルシートでclassをうまく使えることが必要だと思っていた
のですが、私の歩勉強で一度も試したことがありません。
どうしても複雑で、難しいと思ってしまいます。
でも、今回は、右列の１行のみの背景色の設定だったのですが、これから
細かい設定を加えようと思っているので、避けて通れないと思います。
今回、基本を教えてもらいましたので、もう少し研究して使ってみよう
と思います。
たいへんありがとうございました。
|
| 解決しました。 ( No.6 ) |
- 日時： 2009/12/23 15:38
- 名前： けん
- 状態： 解決!
- みなさんのおかげで、思いどおりに表示できました。
たいへんありがとうございました。
|
| - ( No.7 ) |
- 日時： 2011/12/11 17:35
- 名前： pl517.nas821.p-osaka.nttpc.ne.jp
- #SPAM
|
この質問記事は解決しています。
表の列をグループ化して他の列と設定を変えたいのですが。