Pear::Image_Graph その２
CSS 付きグラフ値表示ファイル作成
それでは、CSS 付きグラフ値表示ファイル p_gra_table-htm.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢Pear::Image_Graph その２｣の中の
CSS 付きグラフ値表示 PHP ファイル
から見てください。
HTML ファイルとは言うものの中身は PHP ファイルです。
特に難しい所はないと思います。
テ－ブルタグは
<?php
include 'p_gra_table.php';
?>
のところで出力されます。
p_gra_table.php は
グラフ値表示ファイル作成
で作成方法を説明しています。
CSS ファイル作成
まず必要な CSS ファイルを作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢Pear::Image_Graph その２｣の中の
CSS 付きグラフ値表示 CSS ファイル
から見てください。
CSS の中に出てくる、border 命令について解説します。
- border-collapse
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか(collapse)、 間隔をあけて表示するか(separate)を指定します。
ここでは、
border-collapse:collapse;
として、隣接するセルのボーダーを重ねて表示します。
なお、table でこの設定をすると tr td th にも同時に設定されます。 - border-style
ボーダーのスタイルを指定します。
ここでは、
border-style:solid;
solid １本線で表示されるよう指定しています。
指定しないと初期値は none で、ボーダーは表示されず、太さも 0 になります。
表のセルなどのボーダーが重なり合う場合は他の値が優先されます。 - border-width
border-style は none 以外を指定します。
数値で指定数値に px や em や ex などの単位をつけて指定します。
px とは1ピクセルを1とする単位、また em とはフォントの高さを１とする単位、
ex とは小文字の｢x｣の高さを１とする単位です。
キーワード thin(細い) medium(普通) thick(太い)のうちのいずれかを指定する方法もあります。
ここでは
border-width:1px;
border-width:2px;
とします。
その他の CSS は標準的なものなので説明は省略します。
これで CSS 付きグラフ値表示ファイル作成は完了です。
引き続き、CSS 付きグラフ値表示ファイルの動作確認をします。
CSS 付きグラフ値表示ファイル動作確認 に続く
グラフ値表示ファイル動作確認 に戻る