テーブルの線を点線にする

Question

とても初歩的な質問ですいません。テーブルの線をすべて点線にしたいのですがどのようにしたらいいのかわかりません。

としたら周りの枠は点線なんですが３列あるはずの線が表示されません。その線も点線で表示させるにはどのようにしたらいいですか？

Xaval · Accepted Answer

ページのどこでもいいのですが、を記述します。～内でいいと思います。～

には、「class」を設定します。 :

この、class="dotBorder" 属性を記述したは、上記に記述される TABLE.dotBorder { border-collapse: collapse; border-style: dotted; } によって、デザインが適用されます。つまり、style="border-collapse: collapse;border-style: dotted;" を指定したのとおなじになります。同じ設定をしたい

がたくさんあれば、ひとつひとつstyle=""を設定するよりはこうしたほうがいいですよね？ TABLE.dotBorder { border-collapse: collapse; } を変更するとclass="dotBorder"を指定したテーブル全て（複数あってもよい）のスタイルが変更されます。補足ですが、 TABLE.dotBorder TD{ width: 150px; height: 30px; border: 3px dimgray dotted; } の意味は、class="dotBorder" を指定した

の入れ子になっている

タグ全てに、スタイル width: 150px; height: 30px; border: 3px dimgray dotted; を適用する、という意味です。

適用される

← TD.dotBorder だから、TABLE.dotBorderとは無関係

適用されない

同じように、内に SPAN.emphasis{ color: #FF0000; font-weight: bold;} と記述すれば、赤で太字設定のタグが出来上がります。～クラスって便利ですよ。また、classはグループ化ですが、id=""は、特定要素です。～

～

という風に、各テーブルに一意のid=""をつけて、とします。この場合は、id="table1"のテーブルだけスタイルが適用されます。スタイルシートデザインだけならclassで結構です。idはもっと別の時に効果を発揮します。

fukku22 · Answer

別解として、CSSは別ファイルに書く方法もあります。以下の例を同じフォルダに保存して試してみてください。この場合、複数のHTMLでCSSを共有できるのが大きな利点ですね。 ○サイト全体のデザインはCSSファイルを作る ○そのHTML内でしか使わないCSSは、HTMLのに書く ○限られた場所で使用したいCSSは style= 属性で・・・のような使い分けをすると良いと思います。 style= 属性はできるだけ使わないように書くと、メンテナンスしやすいHTMLになります。 CSSに関しては参考URLの「スタイルシート」が参考になると思います。 ■test.html

■test.css table.dotBorder { border-collapse: collapse; } table.dotBorder td { width: 150px; height: 30px; border: 3px dimgray dotted; } 参考URL：http://tohoho.wakusei.ne.jp/www.htm

fukku22 · Answer

table に指定する border は一番外側の枠のみです。・・かと言って td に border を指定すると、妙なセル間の空白ができてしまいますね。いろいろ方法はありますが、以下のような感じでしょうか。 border-collapse:collapse は隣のセルと枠を重ねます。

これだとメンテナンスが大変ですので、以下のような書き方がオススメです。 class や id 属性を使うとスマートに書けます。（ご存知でしたらごめんなさい。） table.dotted { border-collapse: collapse; } table.dotted td { width: 150px; height: 30px; border: 3px dimgray dotted; }

参考URL：http://tohoho.wakusei.ne.jp/css/basic.htm#Class

harusora · Answer

こんなのはどうでしょう？

もしくは、

数値などは適当にいじってください。ただし、これは文字を入れないとプレビューして見ても点線が認識されません。スペースなどを入れて確認してみてくださいね。一応形にはなるかと思うのですが、とても自信がありません（＾＾; すみません……。他のかたから意見が出たら、そちらの方を是非参考になさってくださいね。

テーブルの線を点線にする

ページのどこでもいいのですが、

別解として、CSSは別ファイルに書く方法もあります。

table に指定する border は一番外側の枠のみです。

こんなのはどうでしょう？

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング