phpな休日 BBS sitemap
1. 1行づつ読み込みながらテーブルを作る

1<>母さん<>2005.9.4<>森の母。会うたびお腹に赤…<>kasan.jpg<>
2<>しずかちゃん<>2005.10.1<>森一番の美貌。荒川静香似…<>shiduka.jpg<>
3<>門番さん<>2006.2.11<>森の入り口あたりがテリトリ…<>monban.jpg<>
4<>チビちゃん<>2006.10.14<>母さんの子。初めて会った…<>chibi.jpg<>
5<>もっちゃん<>2007.1.14<>はっちゃん似なのが命名の…<>mochan.jpg<>

上記ようなデータ(猫さんの名前・初めて会った日・特徴・画像)を読み込んでテーブルを作る場合、

<?php
$log = file("./log1.cgi"); //ログを読み込む
for ($i = 0; $i < count($log); $i++) { //展開する
$list = explode("<>",$log[$i]);
print "<tr>¥n";
print "<td>" . $list[0] . "</td>¥n";
print "<td>" . $list[1] . "</td>¥n";
print "<td>" . $list[2] . "</td>¥n";
print "<td>" . $list[3] . "</td>¥n";
print "<td>" . $list[4] . "</td>¥n";
print "</tr>¥n";
}
?>

id name first date reason photo
1 母さん 2005.9.4 森の母。会うたびお腹に赤ちゃんがいたので。 kasan.jpg
2 しずかちゃん 2005.10.1 森一番の美貌。荒川静香似が命名の由来。 shiduka.jpg
3 門番さん 2006.2.11 森の入り口あたりがテリトリー。出入りする人間をチェックしている。 monban.jpg
4 チビちゃん 2006.10.14 母さんの子。初めて会った時、母さんにくっついていたので間違いなし。 chibi.jpg
5 もっちゃん 2007.1.14 はっちゃん似なのが命名の由来。 mochan.jpg

for文で回しながらテーブルを書かせるわけですが、表が大きくなるほど(横のラインが)見づらくなります。

2. 1行おきに背景色を変える

そこで1行おきに bgcolor で色をつけてやるとグッと見やすくなります。
赤文字部分を追加します。

<?php
$log = file("./log2.cgi"); //ログを読み込む
$linecount = 0; //カウントを初期化
for ($i = 0; $i < count($log); $i++) { //展開する
$list = explode("<>",$log[$i]);
if ($linecount == 1) { //カウントが1なら
print "<tr bgcolor='#add8e6'>¥n"; //背景色をつける
$linecount = 0; //カウントを0に戻す
}
else { //カウントが0なら
print "<tr>¥n"; //背景色はなし
$linecount++; //カウントする(1になる)
}
print "<td>" . $list[0] . "</td>¥n";
print "<td>" . $list[1] . "</td>¥n";
print "<td>" . $list[2] . "</td>¥n";
print "<td>" . $list[3] . "</td>¥n";
print "<td>" . $list[4] . "</td>¥n";
print "</tr>¥n";
}
?>

次の表は上記スクリプトによる表示に加えて、行を上下に移動する機能・画像を表示するJavaScriptを追加しています。
HTMLやスタイルシートで <tr> に直接 bgcolor を書いた場合は、行の移動や削除・追加に対応できないのに比べて、しっかり1行おきに背景色が変わるのが確認できます。

id name first date reason photo up down
2 しずかちゃん 2005.10.1 森一番の美貌。荒川静香似が命名の由来。 shiduka.jpg
3 門番さん 2006.2.11 森の入り口あたりがテリトリー。出入りする人間をチェックしている。 monban.jpg
4 チビちゃん 2006.10.14 母さんの子。初めて会った時、母さんにくっついていたので間違いなし。 chibi.jpg
5 もっちゃん 2007.1.14 はっちゃん似なのが命名の由来。 mochan.jpg
1 母さん 2005.9.4 森の母。会うたびお腹に赤ちゃんがいたので。 kasan.jpg

2014.2.4 last edit

Produced by haku