プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：minmin30
  • 質問日時：
  • 回答数：4件

とても初歩的な質問ですいません。

テーブルの線をすべて点線にしたいのですがどのようにしたらいいのかわかりません。

<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>

としたら周りの枠は点線なんですが
３列あるはずの線が表示されません。

その線も点線で表示させるにはどのようにしたらいいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： Xaval
  • 回答日時：

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


<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はもっと別の時に効果を発揮します。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fukku22
  • 回答日時：

別解として、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;
}

参考URL：http://tohoho.wakusei.ne.jp/www.htm
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fukku22
  • 回答日時：

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>

参考URL：http://tohoho.wakusei.ne.jp/css/basic.htm#Class
    • good
    • 0
    • 件
通報する
この回答へのお礼

すいません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>

これをどのようにＨＴＭＬに組み込めばいいのですか？

通報する
お礼日時：2004/11/17 02:42

No.1

  • 回答者： harusora
  • 回答日時：

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



<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>

数値などは適当にいじってください。

ただし、これは文字を入れないとプレビューして見ても点線が認識されません。スペースなどを入れて確認してみてくださいね。

一応形にはなるかと思うのですが、とても自信がありません（＾＾;
すみません……。
他のかたから意見が出たら、そちらの方を是非参考になさってくださいね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速の回答ありがとうございます。

どうしても点線が二重になったりしてうまくいきませんね。

もうずっと色々試してるんですが・・・
知識不足で勉強中です。

まだ色々やって納得のいくように頑張りますね！！

通報する
お礼日時：2004/11/17 02:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報