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

Tweet

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

サンプルソース

HTMLソース

CSSソース

サンプル表示

解説

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箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。