- ベストアンサー
テーブルの料金表の複雑な記述方法
- テーブルの料金表の記述方法についてわかりにくいので、簡単な方法を教えてください。
- 料金表のセルを横方向に色を変えたい場合、どのように記述すればよいのでしょうか？
- サービス内容と料金のセルの色を同じに変更したい場合、どのような設定が必要でしょうか？
- wknuuy
- お礼率0% (0/38)
- ホームページ作成ソフト
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
横もクラスの指定でいいです。ただ、競合した場合には詳細度を理解する必要があります。 詳細度をクイズで、そして、解説というページがあります。 http://lab.klab.org/young/2011/05/css_trouble_rule_not_apply/ やりたいことは、サービス内容と料金、ストレート、パーマ、トリートメントの色を同じに変更したいです。 ストレート、パーマ、トリートメントのところは右サイドの大人のところも料金も含めて色を変更したいです。 これの意味がよくわからかったので、下記で理解して自分でやってください。 例えばこんな風に色を付けてみました。 .white{background:white;} .price{font-size:150%;font-weight:bold;} .cut td{background:#ff9999;} .tori *{background:#9999ff;} <table> <thead> <tr> <th rowspan="2" colspan="2"> サービス内容 </th> <th width="99" height="29" colspan="3"> 料金 </th> </tr> </thead> <tbody> <tr> </tr> <tr class="cut"> <th width="165" rowspan="3"> カット </th> <td class="white" width="270"> 大人（一般） </td> <td class="price"> \4,200 </td> </tr> <tr class="cut"> <td class="white"> 中学・高校生 </td> <td class="price"> \3,000 </td> </tr> <tr class="cut"> <td class="white"> 小学生以下 </td> <td class="price"> \2,500 </td> </tr> <tr> <th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> <tr> <th> パーマ </th> <td class="white"> カット・ブロー込 </td> <td class="price"> \5,200 </td> </tr> <tr> <th> カラー </th> <td class="white"> ファッションカラー </td> <td class="price"> \4,500 </td> </tr> <tr class="tori"> <th rowspan="2"> トリートメント </th> <td class="white"> スペシャルプラチナ </td> <td class="price"> \2,300 </td> </tr> <tr class="tori"> <td class="white"> スペシャルイオン </td> <td class="price"> \4,100 </td> </tr> <tr style="background-color:#99cc00"><th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> </tbody> </table> </body> </html>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
class名やidは、HTMLで用意されている要素では文書構造を表しきれないときに、それを補完するためのものです。 ★事前に宣言する必要なんかまったくありません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 「(DIV要素とSPAN要素は、)id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ですので、それをスタイルのために使おうが使うまいが関係ありません。自分の備忘録として付けておいても良いです。→No.2の回答例で、 class="details"を使っていますが、このセルには details(細目)が書いてあるのだと自分自身にわかればよいのです。 それが付いていると、さきでプレゼンテーションをスタイルシートで変更したくなったとき、クラスセレクタが使えます。 No.2のHTMLの場合、一切class名がなくても実際には希望とおりのデザインができます。 tr>td,tr>th+td{background-color:lime;} th,tr>td+td,tr>th+td+td{background-color:yellow;} で、thと価格セルの背景色は黄色になるでしょう。 ただ、本人だけがわかっていれば良いことではあるのですが、class名は誰にでもわかるように大人向けのメニューなら、class="forAdult"とかのほうが良いかもしれませんね。
- Gletscher
- ベストアンサー率23% (1525/6504)
No.1の者です。 私の疑問を理解されていないのかな？ <td>で、"white"という名のclassを指定していますが、その中身はどこで定義していますか？ という疑問です。 classで"white"とか"price"という名前を使う前に、その内容をデファインしておかないといけないですよね？ それが別ファイルならincludeしておかないといけないし、同じファイル内なら<head>の直下で宣言しておくのが一般的ではないですか？ <td style="background-color:white"> や、 <td bgcolor="white"> とするなら分かりますが、 <td class="white"> とするなら、その"white"の内容は事前に宣言しないといけないけど、このソースには無かったので、書かれていないもっと前にあるのかどうかという疑問です。 例えば、ヘッダーなどに、以下のような記述がありますか？ <style type="text/css"> <!-- .white { background-color: white; } --> </style> この種の質問をする時は、<!doctype ・・・・>から始まるソースのすべてを書いた方が良いですよ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableには必ずsummary属性を書いておきましょう。tableやセルのwidthやheightはスタイルで指定しましょう。 本来はcolgroupでスタイルシートで設定できるはずなのですが、これを実装しているブラウザは知りません。よって通常の指定しかできませんが tableの書き方にいくつかミスがあるのと質問の内容が今ひつと津理解できないので、修正してあげて置きますので、各セルに(a)～(w)の記号が入れてあるので、どこを何色にしたいかと具体的に示してください。たとえばdは赤とか・・ ★タブは＿に置換してあるので戻してください。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ＿<table border="1" summary="価格表"> ＿＿<thead> ＿＿＿<tr> ＿＿＿＿<th colspan="2" abbr="details">サービス内容(a)</th><th colspan="2" abbr="price">料金(b)</th> ＿＿＿</tr> ＿＿</thead> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<th rowspan="3">カット(c)</th><td rowspan="3" class="details">(d)</td><td class="white">大人（一般）(e)</td><td class="price">\4,200(f)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<td>中学・高校生(g)</td><td class="price">\3,000(h)</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>小学生以下(i)</td><td class="price">\2,500(j)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<th abbr="str">ストレート(k)</th><td class="details"">縮毛矯正（カット・ブロー込）(k)</td><td colspan="2" class="price">\8,600(l)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<th abbr="parm">パーマ(m)</th><td class="details">カット・ブロー込(n)</td><td colspan="2" class="price">\5,200(o)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<th>カラー(p)</th><td class="details">ファッションカラー(q)</td><td colspan="2" class="price">\4,500(r)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<th rowspan="2">トリートメント(s)</th><td class="details">スペシャルプラチナ(t)</td><td colspan="2" class="price">\2,300(u)</td> ＿＿＿</tr> ＿＿＿<tr class="white"> ＿＿＿＿<td class="white" class="details">スペシャルイオン(v)</td><td colspan="2" class="price">\4,100(w)</td> ＿＿＿</tr> ＿＿</tbody> ＿</table>
- Gletscher
- ベストアンサー率23% (1525/6504)
<td>に「class="white"」を指定している理由が分からないし、「white」というクラスを定義しているところがないですね。 かなり意味不明なソースになっているので、それは無視して質問の文章にだけ答えれば、横１列のすべてのセルに背景色を指定したいということですね？ ならば、<tr>タグに指定すれば良いです。 例えば、 <tr style="background-color:red"> などです。 <table>タグに指定すれば、さらにすべての行のセルにも１行で制定できます。 <table width="558" style="background-color:red">
補足
クラス whiteは大人のところの列を変えたんです。 <tr style="background-color:#99cc00"><th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> これでやっても行の色が変わらないんですがなぜでしょうか？