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

灰色背景がサンプルソース


サンプルソース

HTMLソース

<table class="btbl">
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>

CSSソース

.btbl, .btbl th, .btbl td {
border:1px solid #000;
}

サンプル表示

→テーブルに直線の枠線を表示する(サンプル)


解説

HTMLソース

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


CSSソース

border:1px solid #000;
これは、太さ1ピクセルの#000色の直線を表示するという意味です。
1pxが太さ、solidが直線、#000が線の色を表しています。

なので、1pxの数字を増やせば太い線に。#000を別の色コードにすれば線の色が変わります。
例)
border:3px solid red;
太さ3pxの赤い直線枠

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