CSSで一個のテーブルだけにデザインを反映する方法
- CSSの編集でテーブルすべてに反映されてしまって困っている場合、特定のテーブルにだけスタイルを反映させる方法を知りたいです。テーブルのスタイルを指定する際に、クラスやIDを使用することで特定のテーブルにスタイルを適用することができます。
- テーブルのスタイルを指定する際に、タグの前にクラスやIDを指定することでそのテーブルにだけスタイルを適用することができます。例えば、<div>タグやクラス名を付けることで、そのテーブルに対してのみスタイルが反映されます。
- 具体的なスタイルシートの記述方法としては、テーブルの前に<div>タグを追加し、クラス名を指定します。そして、CSSのスタイルシート内でそのクラス名を指定して、テーブルにスタイルを適用します。このようにすることで、特定のテーブルにだけスタイルを反映させることができます。
- ベストアンサー
ｃｓｓで一個のテーブルだけにデザインを反映したい
ｃssの編集で、テーブルすべてに反映されてしまって困っています。 下記は書籍のサンプルを抜粋したものですが、 /*--------------------------- ▼テーブル -------------------------- */ table { background-color:#000033;} th { background-color:#005890; color:#ffffff; } td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ という設定にしたら、すべてのテーブルに反映されました。 このテーブルだけ、という風にしたいのですが、スタイルシート側を どうしたらいいのでしょうか？ ちなみに反映したいhtmlファイルのテーブルのソースは下記の感じなのですが、 div とか postとかをtableの前に持っていけばいい？みたいなところまで 調べてわかっているのですが、まったくの初心者でなかなかうまくいきません。 <div class="post"> <table width="400" border="0" cellspacing="1"> ・・・略・・・ </table> </div>
- trb777
- お礼率30% (14/46)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞下記は書籍のサンプルを抜粋したものですが、 その参考書にCSSの最も重要なCascadingについての説明がないのかな？？？ ・・・本当に大事な部分ですからそれについて詳しい説明がないものはゴミ箱行き スタイルシートはCascading(継承)されますが、その際にどのスタイルを適用するかは詳細度や優先順位に従います。 ユーザースタイルシート＞要素内スタイルシート＞HTMLヘッド内＞外部スタイルシート と詳細度 一意セレクタ(100)，クラスセレクタ(10)，要素セレクタ(1) たとえばあるHTMLにおいて 外部スタイルシートなどで決められていても、HTML内の要素内に指定があれば、同じ詳細度であれば後者が優先されます。 たとえば、あるtable要素が、price-listクラスに所属する場合、そのクラスに所属するtableだけ文字を青くする場合 <table class="price-list"> なら table.price-list{color:blue;}/* 詳細度 11ですね。*/ としますし、それが一意--idをもつものなら <table id="price-list"> table#price-list{color:blue;}/* 詳細度 101ですね。*/ また、tableですからsummary属性を持つべきですから< <table summary="price-listt"> でしたら table[summary=price-list]{color:blue;}/* 詳細度 2ですね */ したがって、その前後に関わらず table{color:black;} /* 詳細度1は上書きされます。*/ たとえば外部スタイルシートだけで、特定のtable要素のスタイルを変更したい場合に変わった例として <html> |-- <body> | |--<table><!-- 1 --> | |--<table><!-- 2 --> | | |--<tr> | | | |--<td> | | | | |--<table><!-- 3 --> | |--<table><!-- 4 --> という樹構造である場合、しかも【一切のクラス指定がない】ばあいであっても、この４個のtableは別個のスタイルシートを適用できます。 table{ color:red;} table + table{ color:blue;} table>table{color:green:} という方法もある。 スタイルシートのためにHTMLを書きかえるのではなく、HTMLがきちんと書けていたら、スタイルシート側で区別できるはずです。 たぶんその参考書にはその重要なことの説明がないのでは？？？
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
テーブル云々は一度忘れて、「特定のPタグの文字色を変更する」を考えてみると分かりやすいかもしれません。CSSには全てのタグ、グループに属するタグ、特定のタグなどいろんな指定方法があります。 望まれているのは答えそのものかもしれませんし、ここでその答えを書くのはとても簡単なことですが、初心者の方でクリアすべき最初の課題は、まず検索の方法を身につけることかもしれません。 それなりに調べられた結果、わからなかったということと思いますが、おそらく「検索結果の内容が難しかった」のではなく、「検索の方法が適切でなかった」ということが想像されます。 たとえば今回の場合だと「css id class」でもう一度検索されてはいかがでしょうか。どういったレベルでCSSを学ばれたいかは分かりませんが、「検索力を上げること」は、確実にスキルアップにつながるので、ぜひともおすすめします。
- DrFell
- ベストアンサー率55% (305/551)
>div とか postとかをtableの前に持っていけばいい？みたいなところまで >調べてわかっているのですが は誤解です。それでもできないことはないですが、divはtableなどの適した要素がない場合につけるボックス要素です。tableにdivは過重包装です。また、postでなくてもtrb777でもなんでもいいので後から見ても分かるように、どういう意図でのclassなのか分かるようにつけてください。また、今は1つですが、classは何回でも使えますので、将来同じスタイルにしたい表が出てきたときhtml側に同じclass名をつければ、cssは増やす必要はなくなります。 ----- <div class="post"> <table width="400" border="0" cellspacing="1"> ・・・略・・・ </table> </div> ----- の<div>は止めて、<table>にクラスをつけてください。 ----- <table class="post" width="400" border="0" cellspacing="1"> ・・・略・・・ </table> ----- htmlのclassに対応するのは、ｃｓｓでは「.」ピリオドです。ですからclass="post"のついたテーブルは table.post｛｝ と指定し、class="post"の子要素の指定であるtdやthは「の中の」という意味で半角スペースを.postにつけ .post th{} .post td{} と指定します。つまり、 /*--------------------------- ▼テーブル -------------------------- */ table.post { background-color:#000033;} .post th { background-color:#005890; color:#ffffff; } .post td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ となります。
- funi2
- ベストアンサー率53% (14/26)
classというのが, まさにこのテーブルにだけ, という指示をするものです。 cssでdivなどの要素にclassを指定する場合, html要素名とclass名を"."で連結します。 div.post { .... } のように。 すると, class="post"と指定されたdivにだけ, div.postのcssが適用されます。 次に, div.post table { ... } と書くと, class="post"が指定されたdivの中のtableにだけ, 指定されたcssが適用されます。 そうすると, この場合, 一番簡単なのはcssをこうすることかと思います。 ------------------------------------------- div.post {} div.post table { background-color:#000033;} div.post th { background-color:#005890; color:#ffffff; } div.post td { background-color:#ffffff; color:#333333; } ------------------------------------------- こうすることで, postというclassのdivの中のtable, th, tdにだけ cssが適用されるようになります。 もっと詳しいcssの文法等は書籍等におまかせします...
お礼
遅くなってすいません。 ありがとうございました！ そうそう、そういうイメージがあったんですが、 なかなかぴんときませんでした。 ようやく理解できました！ ありがとうございました。
関連するQ&A
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- テーブルの中のリンクにつく枠を消したい
ブログのカレンダーです。背景色のテーブルの中のリンク文字の周りに白い枠線ができてしまいます。枠線の取り方をご教授ください＞＜ ＊HTML＊ <table border="0" cellspacing="1" bgcolor="#ddd"> <tr><td id="calendar_${CALENDAR_CODE}"></td> </tr></table> ＊CSS＊ #calendar table {width: 698px;margin: 0px auto;background: #000000;color: #FFFFFF;} #calendar td {text-align: center;color: #ffffff;} #calendar td a {background: #000000; color: #FFFFFF;} #calendar td a:hover,#calendar td a:active {background: #888888;color: #FFFFFF;}
- 締切済み
- HTML
- tableをcssで表記したい
下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか？ tableの種類が一つの場合はできるのですが・・・ ＜table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"＞ ＜tr＞ ＜td width="30" bgcolor="#FFFFFF"＞a＜/td＞ ＜td "＞b＜/td＞ ＜/tr＞ ＜/table＞ ＜br＞ ＜table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"＞ ＜tr＞ ＜td width="25" bgcolor="#CCCCCC"＞c＜/td＞ ＜td＞d＜/td＞ ＜/tr＞ ＜/table＞
- 締切済み
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- safariとfirefoxとでテーブルレイアウトが変わってしまい、原因がわからずに困っています。
safariとfirefoxとでテーブルレイアウトが変わってしまい、 原因がわからずに困っています。 下記のタグでテーブルを表示したいのですが、 safariでは私が頭の中で描いていた通りのレイアウトになるのですが firefoxで開くとボックスが横に伸びてしまいレイアウトが変わってしまいます。まだ素人なので原因がまったくわからず困っています。 どなたかアドバイスを頂ければ幸いです。 <style type="text/css"> marguee { background:#000000; color:#ff6699; padding:5px 0; } .profile th{ background:#fff0ff; font:10px Verdana; color:#666666; text-align:right; padding:5px; } .profile td{ background:#ffffff; font:10px Verdana; color:#333333; padding:5px; } </style> <body bgcolor="000000"> <!-- TEMPLATE START --> <div class="profile"> <div align="center"> <table bgcolor="#000000" cellspacing="1" cellpadding="0"> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> <tr> <th>Name</th> <td width="300">テキスト</td> </tr> <tr> <th>DOB</th> <td width="300">テキスト</td> </tr> <tr> <th>Height</th> <td width="300">テキスト</td> </tr> <tr> <th>POB</th> <td width="300">テキスト</td> </tr> <tr> <th>Blood Type</th> <td width="300">テキスト</td> </tr> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> </table> </div> <!-- TEMPLATE END --> </body> </html>
- 締切済み
- HTML
- テーブルをＣＳＳの外部ファイルで表示するには
テーブルをＣＳＳの外部ファイルを利用して表示させたいのですが 外部ファイルへの記入が間違っているのかうまくいきません。 作りたいテーブルは htmlで書くと <table border="1" cellspacing="0" bordercolor="#ffffff"> <tr><th colspan="4" bgcolor="#000000"> 見出し </th> </tr> <td width="125px"> 内容１ </td> <td width="125px"> 内容２ </td> <td width="125px"> 内容３ </td> <td width="125px"> 内容４ </td> </tr> </table> といった感じです。 内容１～４も中心に寄せたいです。 テーブル全体は指定できても、th,tdの指定の仕方がよくわかりません。 外部ファイルにはどう書けばいいでしょうか。 初歩的かもしれませんがよろしくお願いいたします。
- ベストアンサー
- CSS
- シンプルなコードなのにテーブルにCSSが適用されない・・・
今回思い悩んで質問させて頂く事となりました。 すごい単純に書いてるつもりなのですが テーブルに着色 （青） （赤） が適用されません。 当方、本一冊の独学でやっているので大ポカと思うので ご指摘頂ければと思います。 以下コードです。 ------------------------------------------------ <title>無題ドキュメント</title> <style type="text/css"> <!-- #blue tr {background-color:blue;} #blue td {background-color:blue;} #red tr {background-color:red;} #red td {background-color:red;} --> </style> </head> <body> <table width="200" border="1"> <div id="blue"> <tr><td> </td></tr> </div> <div id="red"> <tr><td> </td></tr> </div> </table> </body> Dreamweaver上では着色されるのですが・・・ どなたかご教授お願い致します。
- ベストアンサー
- HTML
- 特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
- CSSでテーブルを表示させるには
CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。
- ベストアンサー
- CSS
お礼
遅くなり申し訳ありません。 ご回答いただいた方法でできました。 ご親切にありがとうございました！ 勉強になりました！