• ベストアンサー

スタイルシートで

スタイルシートでテーブルのTH部分に色をつけたいのですがうまく行きません。 css部分 TH.Color { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; } これではだめでしょうか? それと、この教えてgooみたいに、テーブルの枠を普通のtable border="1"じゃなくって単線?のようにしたいのですがスタイルシートでどう指定したら良いでしょうか? 宜しくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • chupark
  • ベストアンサー率41% (90/218)
回答No.1

定義はまずくはないと思います。 mole_moleさんが書かれた方法はクラスの指定ですね。 <th class="Color">というようにテーブルのthタグの中にクラスを指定していますか? ちなみに、thタグ全部を無条件にスタイル設定するときは、 TH{ background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; } でいいと思います。

mole_mole
質問者

お礼

アッ!! すみません、class指定するのを忘れていました・・・ボケボケです。 ご指摘有難うございます。 もしテーブルのボーダーを単線にする方法もご存知でしたたらご教示願います。 ちなみに書き忘れましたがIE6.0で動けばOKです。

関連するQ&A

  • スタイルシート

    #Area_Login table .tbl { margin-left: auto; margin-right: auto; border: solid 1px #FFFFFF; background-color: #000000; } #Area_Login table .tbl th { text-align: center; font-size: 12pt; background-color: #AFB4DB; height: 15px; } #Area_Login table .tbl td { text-align: center; font-size: 11pt; background-color: #AFB4DB; border: solid 1px #FFFFFF; } <div id="Area_Login"> <table class="tbl"> <tr> <th><th> <tr> <td></td> </tr> </table> </dib> 上記ソースなのですが、テーブルが中央に配置されなくて困っています。 どなたか教えていただけませんか?

    • 締切済み
    • CSS
  • スタイルシートについて

    スタイルシートについて質問です。 下記をTableの基本スタイルにしています。 特定のTableのみ、borderカラーを#666666にしたい場合 上記基本スタイルを生かしたままで簡潔なスタイルの設定方法はないでしょうか。 table, td, th {border: 1px solid; border-collapse: collapse} .w550     {border-color: #8AC5D4; width:550px} .w550 td    {border-color: #8AC5D4; text-align: center} .w550 th    {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90} いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので アドバイスいただけると大変助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 表の作成をスタイルシートで

    皆さんはHTMLで表を作成する際、どのように作成していますか? 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。    ■□□    ■□□    ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0">  <tr>   <td class="title">6月7日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr>  <tr>   <td class="title">6月8日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ;     border-width : 1px 0 0 1px ; border-style : solid ;     border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF;     } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ;         line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC;      } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。

    • ベストアンサー
    • HTML
  • thのスタイルを適用するにはどうすればいいでしょう

    <table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか? 理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが 実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。 なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか? 現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。 理想の表示は下のテーブルで 理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • スタイルシートをhead内で定義したい

    下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>

  • 直接スタイルシートを埋め込む方法で区切り文字はどうしたらよいのでしょうか

    <th style="background-color:#ffff00">テスト</th> と直接スタイルシートを埋め込む方法で、 スタイルシートの設定を2つ以上以下を追加したいのですが、 区切り文字はどうしたらよいのでしょうか? border-bottom-color:red border-left-color:red border-right-color:red border-top-color:red border-color:red 直接埋め込むメリット、デメリット(手間がかかる以外)が知りたいです。

    • ベストアンサー
    • HTML
  • スタイルシートの書き方を教えてください!

    各文章の字間を空けるために部分的に <FONT style="line-height:150%"color="#c0c0c0"> </FONT> このようにしていしていたのですが、ページ全体にスタイルシートを使用して字間を調整するにはどのようなタグを書けばいいのでしょうか?色々と書き方があると思うのですが、素人にもわかりやすいように教えていただけますでしょうか、今現在使っているスタイルは以下の通りです。それをどのように書き換えればいいのでしょうか?どなたかおしえていただけますでしょうか。 <style type="text/css"><!-- body{ font-size : 10pt;color : #cccccc; background-color: #000000;} body{ font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} body{ font-style : "line-height:150%"; } TABLE { font-size : 10pt;color : #cccccc; } TABLE { font-face="MS UI Gothic, ヒラギノ明朝 Pro W3; } TABLE {font-style : "line-height:150%";} td{font-size : 10pt;color : #cccccc; } td{font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} td{font-style : "line-height:150%"; } --> </style>

    • ベストアンサー
    • HTML
  • 外部スタイルシートがテーブル内に効かない

    外部スタイルシートの設定が、テーブル内には効きません。 特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。 以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。 テーブルがなければ、スタイルシートは効きます。 初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルのスタイルを効率よく設定するには?

    同じページに複数のテーブルがあり、別のスタイルを適用させたい。 ---- <style TYPE="text/css"> TABLE.A {border-style: solid; } TH.A { color: red; } TD.A { color: blue; } TABLE.B {border-style: double; } TH.B { color: green; } TD.B { color: black; } </style> <table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table> <table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table> --- <table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシートのオブジェクト志向的な書き方ってありますか?

    次のような背景画像部分だけが異なる場合、 .MY_TABLE_1 { position: static; height: 15; color: #ffffff; background-color: #ffffff; background-image: url('bg_title_blue.gif'); font-family: MS UI Gothic; font-weight: normal; font-size: 12; text-indent: 10; border-left: thin groove #cccccc; border-right: thin groove #666666; border-top: thin groove #cccccc; border-bottom: thin groove #666666; padding: 0 } .MY_TABLE_2 { position: static; height: 15; color: #ffffff; background-color: #ffffff; background-image: url('bg_title_yellow.gif'); font-family: MS UI Gothic; font-weight: normal; font-size: 12; text-indent: 10; border-left: thin groove #cccccc; border-right: thin groove #666666; border-top: thin groove #cccccc; border-bottom: thin groove #666666; padding: 0 } これをまとめて、 .MY_TABLE_BASE { position: static; height: 15; color: #000000; background-color: #ffffff; font-family: MS UI Gothic; font-weight: normal; font-size: 12; text-indent: 10; border-left: thin groove #cccccc; border-right: thin groove #666666; border-top: thin groove #cccccc; border-bottom: thin groove #666666; padding: 0 } .MY_TABLE_1 { ほにゃらら background-image: url('bg_title_blue.gif'); } .MY_TABLE_2 { ほにゃらら background-image: url('bg_title_yellow.gif'); } というようにまとめて指定する方法はないのでしょうか???

    • ベストアンサー
    • CSS

専門家に質問してみよう