はるきちの部屋日本語版サンプルページ(2)
このページでは「テーブル(表)」に関するタグを学習します。[Javascriptおよびボタンについてはページ下部を御覧ください]
ページの背景はLightPink、テーブルの背景はBeigeを指定しています。
テーブルの基本
○テーブル全体をTABLEタグで囲む
○テーブルの1行をTR(=table row)タグで囲む
○テーブルの1行の中の各セルをTD(=table data)タグで囲む
TABLEタグにBORDER=0を指定すると罫線が出ないので、インデントを揃えたい場合のレイアウト用に利用できます。
[はるきちプロフィール]
・罫線あり版(BORDER=1を指定。数字を大きくすると枠線が太くなります。)
・左側のカラムは太字を指定。白×ブルー」はフォントカラーに青緑系を指定。
| 生年月日 | 1997年12月27日 |
| 出身地 | 神奈川県相模原市 |
| 品種 | セキセイインコ ハルクイン種 白×ブルー |
| 趣味 | 食べること |
| 特技 | 胴体着陸 |
[はるきち写真コーナー]
○BORDER=0を指定し、レイアウト用にテーブルを用いる。
○1行目は、２カラム分を１カラムとして扱うための指定(「セルの連結」)。
○2行目は写真画像を左に、キャプションを右に配置。右のキャプションはセル内の下部に来るよう、
VALIGNタグでbottomを指定(他にtop, middleも可)。
○3行目は、縮小画像をテーブルに表示し、クリックするともとの画像を表示させる方法。
○TABLEタグにcellpaddingを指定することで、セル内のマージン(縁からの表示位置)を指定。
(写真とテーブルの縁との間を広くするため)
| 写真(2001.1.19撮影) |
 | 想いにふけるはるきち |
| ←クリックすると大きくなります。 |
[TOPPAGEへ戻る]
[Javascritpとボタン表示]
○Javascriptを埋め込んで、「最終更新日」を自動取得して表示。「最終更新日」の部分は他の文字列(例:actualizado)にも置き換え可(↓)。
○トップに戻るボタン...ボタンなどの「部品」は「フォーム」タグで貼り付け領域を指定して、その中に書くのがポイント。