テーブルに点線の枠線を表示する

Tweet

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

CSSソース

サンプル表示

解説

HTMLソース

点線枠を表示させたいテーブルにのみ適用させる為、テーブルにidを指定します。
ここでは、<table id=”dtbl”>としています。

CSSソース

border:1px dotted #000;
これは、太さ1ピクセルの#000色の点線を表示するという意味です。
1pxが太さ、dottedが点線、#000が線の色を表しています。
なので、1pxの数字を増やせば太い線に。#000を別の色コードにすれば線の色が変わります。
また、dottedをdashedに変えると、点線が荒い点線に変わります。(IEではあまり変化がありませんが)

例)
border:3px dotted red;
太さ3pxの赤い点線枠

なお、.dtbl, .dtbl th, .dtbl tdについてですが、これはidがdtblのテーブル全体、dtblのthタグ、dtblのtdタグ全てに{}内のものを適用するという意味です。
つまりは、テーブルの外枠、thタグの周りの枠、tdタグの周りの枠全てに点線枠を引きますよということになります。
同じ指定をする時は、,で区切って並べれば1箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。