- ベストアンサー
テーブルの線を点線にする
とても初歩的な質問ですいません。 テーブルの線をすべて点線にしたいのですがどのようにしたらいいのかわかりません。 <table style="border-color:dimgray;border-style:dotted"> <tr> <td width="150" height="30"></td> </tr> <tr> <td width="150" height="30"></td> </tr> <tr> <td width="150" height="30"></td> </tr> </table> としたら周りの枠は点線なんですが ３列あるはずの線が表示されません。 その線も点線で表示させるにはどのようにしたらいいですか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ページのどこでもいいのですが、 <STYLE> TABLE.dotBorder { border-collapse: collapse; border-style: dotted } TABLE.dotBorder TD{ width: 150px; height: 30px; border: 3px dimgray dotted; } </STYLE> を記述します。 <HEAD> ～ </HEAD>内でいいと思います。 <TABLE>～</TABLE>には、「class」を設定します。 <TABLE class="dotBorder"> : </TABLE> この、class="dotBorder" 属性を記述した<TABLE>は、 上記<STYLE>～</STYLE>に記述される TABLE.dotBorder { border-collapse: collapse; border-style: dotted; } によって、デザインが適用されます。 つまり、style="border-collapse: collapse;border-style: dotted;" を指定したのとおなじになります。 同じ設定をしたい<TABLE>がたくさんあれば、 ひとつひとつstyle=""を設定するよりはこうしたほうがいいですよね？ TABLE.dotBorder { border-collapse: collapse; } を変更するとclass="dotBorder"を指定したテーブル全て（複数あってもよい）のスタイルが変更されます。 補足ですが、 TABLE.dotBorder TD{ width: 150px; height: 30px; border: 3px dimgray dotted; } の意味は、class="dotBorder" を指定した<TABLE>の入れ子になっている<TD>タグ全てに、スタイル width: 150px; height: 30px; border: 3px dimgray dotted; を適用する、という意味です。 <TABLE class="dotBorder"> <TR> <TD>適用される</TD> <TD>適用される</TD> <TD class="specialCell">適用される</TD> </TR> </TABLE> <TABLE class="solidBorder"> <TR> <TD>適用されない</TD> <TD>適用されない</TD> <TD class="dotBorder">適用されない</TD> ← TD.dotBorder だから、TABLE.dotBorderとは無関係 </TR> </TABLE> 同じように、<STYLE>～</STYLE>内に SPAN.emphasis{ color: #FF0000; font-weight: bold;} と記述すれば、赤で太字設定の<SPAN>タグが出来上がります。<SPAN class="emphasis">～</SPAN> クラスって便利ですよ。 また、classはグループ化ですが、id=""は、特定要素です。 <TABLE id="table1">～</TABLE> <TABLE id="table2">～</TABLE> <TABLE id="table3">～</TABLE> という風に、各テーブルに一意のid=""をつけて、 <STYLE> #table1{ border: 1px solid #FF9900; } </STYLE> とします。この場合は、id="table1"のテーブルだけスタイルが適用されます。 スタイルシートデザインだけならclassで結構です。idはもっと別の時に効果を発揮します。
その他の回答 (3)
- fukku22
- ベストアンサー率57% (15/26)
別解として、CSSは別ファイルに書く方法もあります。 以下の例を同じフォルダに保存して試してみてください。 この場合、複数のHTMLでCSSを共有できるのが大きな利点ですね。 ○サイト全体のデザインはCSSファイルを作る ○そのHTML内でしか使わないCSSは、HTMLの <head> に書く ○限られた場所で使用したいCSSは style= 属性で ・・・のような使い分けをすると良いと思います。 style= 属性はできるだけ使わないように書くと、メンテナンスしやすいHTMLになります。 CSSに関しては参考URLの「スタイルシート」が参考になると思います。 ■test.html <html> <head> <link rel="stylesheet" type="text/css" href="./test.css"> </head> <body> <table class="dotBorder"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </body> </html> ■test.css table.dotBorder { border-collapse: collapse; } table.dotBorder td { width: 150px; height: 30px; border: 3px dimgray dotted; }
- fukku22
- ベストアンサー率57% (15/26)
table に指定する border は一番外側の枠のみです。 ・・かと言って td に border を指定すると、妙なセル間の空白ができてしまいますね。 いろいろ方法はありますが、以下のような感じでしょうか。 border-collapse:collapse は隣のセルと枠を重ねます。 <table style="border-collapse:collapse"> <tr> <td width="150" height="30" style="border:3px dimgray dotted"></td> </tr> <tr> <td width="150" height="30" style="border:3px dimgray dotted"></td> </tr> <tr> <td width="150" height="30" style="border:3px dimgray dotted"></td> </tr> </table> これだとメンテナンスが大変ですので、以下のような書き方がオススメです。 class や id 属性を使うとスマートに書けます。 （ご存知でしたらごめんなさい。） table.dotted { border-collapse: collapse; } table.dotted td { width: 150px; height: 30px; border: 3px dimgray dotted; } <table class="dotted"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
- harusora
- ベストアンサー率36% (16/44)
こんなのはどうでしょう？ <table height="30" width="150"> <tr> <td style="border-style: dotted"></td> </tr> <tr> <td style="border-style: dotted"></td> </tr> <tr> <td style="border-style: dotted"></td> </tr> </table> もしくは、 <table height="30" width="150"> <tr> <td style="border-style: dotted"></td> </tr> <tr> <td style="border-left-style: dotted; border-right-style: dotted; border-bottom-style: dotted"></td> </tr> <tr> <td style="border-left-style: dotted; border-right-style: dotted; border-bottom-style: dotted"></td> </tr> </table> 数値などは適当にいじってください。 ただし、これは文字を入れないとプレビューして見ても点線が認識されません。スペースなどを入れて確認してみてくださいね。 一応形にはなるかと思うのですが、とても自信がありません（＾＾; すみません……。 他のかたから意見が出たら、そちらの方を是非参考になさってくださいね。
お礼
早速の回答ありがとうございます。 どうしても点線が二重になったりしてうまくいきませんね。 もうずっと色々試してるんですが・・・ 知識不足で勉強中です。 まだ色々やって納得のいくように頑張りますね！！
お礼
すいませんclass や id 属性の意味がわかりません。 スタイルシートもどのように使ったらいいかわからず困っています。 table.dotted { border-collapse: collapse; } table.dotted td { width: 150px; height: 30px; border: 3px dimgray dotted; } <table class="dotted"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> これをどのようにＨＴＭＬに組み込めばいいのですか？