• ベストアンサー

スタイルシートを使うとボーダー関連設定の挙動が変わる?

tableタグには、 bordercolordarkと、bordercolorlightがありますが、 スタイルシートには、border-colorしか指定出来ません。 tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、 スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。 この変の挙動の決まりがよく分からないのですが、 どなたかお詳しい方はいらっしゃいませんでしょうか? ちなみに、今実現したいことは、 tableに立体感の無い枠線(影なし1色)を付け、各セルを区切る線も同色で書きたいのです。 外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。 また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。 ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。

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

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

  • ベストアンサー
回答No.3

HTMLのTABLE要素にはbordercolordarkなどの属性は存在しません。 いつものマイクロソフト方言でしょう。無視します。 CSSである要素に設定した枠線が、当該要素の外枠なのは当然です。 TABLE要素も例外ではありません。表の罫線を全体的に描くのでした ら、TD要素の外枠を指定します。いずれも、border-styleで種類を 指定しますので、solidにしとけばベタになります。 というわけで、 TABLE {    border-collapse: collapse;    border-style: solid;    border-color: aqua;    border-width: 4px;    } THEAD {    background-color: aqua;    } TD {    border-style: solid;    border-color: aqua;    border-width: 2px;    } って感じのスタイルシートで、 <table> <thead>   <tr>     <td>見出しその1</td>     <td>見出しその2</td>   </tr> </thead> <tbody>   <tr>     <td>セル1</td>     <td>セル要素2</td>   </tr>   <tr>     <td>2行目のセル要素1</td>     <td>2行目のセル要素その2</td>   </tr> </tbody> </table> これでオッケー。

guest98
質問者

お礼

期待通りの結果が得られました。 ありがとうございました。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

こんな感じでどうでしょう? <style type="text/css"> table{ background-color:#000000; border-width:2px; border-style:solid; border-color:#000000; } thead{ background-color:#000000; color:#ffffff; } tbody{ background-color:#ffffff; } </style> <table border="0" cellpadding="2" cellspacing="1"> <thead> <tr> <th>1</th> <th>1</th> <th>1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>

guest98
質問者

お礼

期待通りの結果が得られました。 ありがとうございました。

  • 345itati
  • ベストアンサー率48% (795/1639)
回答No.1

要するにbordercolor、bordercolordark、bordercolorlightはHTML4.01の規格外で、IEの独自拡張じゃないかと思いますが。。 (手持ちのHTML辞典には独自拡張とは記載されていないので自信無いです。 だからスタイルシートに対応する記述が無くても当然なのではないでしょうか。 Netscapeなどではそもそも表示出来ない場合があるわけですし。 とりあえず、推測範囲だけですみません。

guest98
質問者

お礼

規格外、独自拡張といったことは頭にありませんでした。 パレットには気をつけていたのですが。 ご指摘ありがとうございます。

関連するQ&A

  • html上でのtableのborder指定

    htmlにstyleを用いてtableのborderを適用させる方法を教えて下さい。 cssが使えないのでhtmlに指定させたときに、各セルごとだけにボーダーを適用させる方法はありませんか? 各セルの個数がバラバラなので、tableに指定すると、大きい外枠にborderが付いてしまいます。 画像のような形にしたいのですが、教えて下さい。

    • ベストアンサー
    • HTML
  • スタイルシートで

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

    • ベストアンサー
    • HTML
  • スタイルシートについて

    スタイルシートについて質問です。 下記を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
  • スタイルシートの外枠について質問です。

    スタイルシートの外枠について質問です。 外部ファイルに .container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66} と記入、htmlに <link rel="stylesheet" href="(スタイルシートのURL)" type="text/css"> </head> <body> <!-- --> <div class="container"><!--全体の横幅など指定 --> </div> </body> </html> と書きました。 margin:30px 0px 100px -450pxで指定したように、ブラウザ上から30pxあけて外枠が表示され始めますが、外枠の下がブラウザにぴったりくっついてしまいます。 場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。 どこが間違っているのか、教えていただけると大変助かります。

  • スタイルシートの設定方法

    なぜか分かりませんが、投稿して10分で削除されたのでもう一同リトライです・・・ 今スタイルシートでHPのデザインの設定をしています。 方法は外部のスタイルシートへリンクを貼って、全部のページを設定したいのですが・・・ テーブルの線を設定するのに、 td { border-color: #ff0000; border-style: double; } と記述する(A)のと、 htmlファイルのTDタグに直接 style="border:3px red double;" って記述する(B)とでは、 線の見え方が違います。 Aは外側の線が太くなります。 Bは二重線の大きさが均等です。 外部のシートでBにしたいのですが、どうしたらいいでしょうか? どなたかご教授下さい!

  • HTMLのテーブルタグに詳しい人に質問ですが・・・

    テーブルの外枠やセルの枠の色は設定できるのですが テーブル内の文字の色はいちいちfont colorを使わないでどうやって設定できるのですか? テーブル全体や一つの行、一つのセルなどに色を決めるタグはどのようにすればいいのでしょうか? 必ずしもスタイルシートを使わなければならないのでしょうか?

  • スタイルシートで「border-style: none」を指定

    素朴な質問なんですが・・・ スタイルシートで「border-style: none」を指定した場合、 img画像に「border="0"」は入れなくても良いものなんでしょうか?

  • スタイルシートテーブルの罫線を細くしたい

    例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか? <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>

  • スタイルシート

    スタイルシートでtable全体のスタイルを指定した場合 1つのtableだけインラインで指定しても効果がありません。 たとえば 全体に枠をつけるうようになっても 1個所だけ <table border="0"> にしても枠が付きます。 こうい場合どうしたらよいのでしょうか? tableの指定をなくし、個別で最初から対処すれば よかったのですが、膨大な量でいまさら個別に classを 付けるのは面倒なので。

    • ベストアンサー
    • 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

専門家に質問してみよう