灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<table class=”btbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>
CSSソース
.btbl, .btbl th, .btbl td {
border:1px solid #000;
}
border:1px solid #000;
}
サンプル表示
| セル1 | セル2 |
解説
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箇所にまとめられるので、慣れてきたらこういう記述法を取り入れてみると良いでしょう。
