ホームページの作成(ホームページビルダー6) |
7.表(テーブル)
表もメニューから作成することができる。複雑なタグを考える必要はない。
2ページ目のhpage2.htmlに表を追加してみる。カーソルを「移動できたでしょうか」の行末("か"の右)に移動しておく。表をはじめ、画像などはカーソル位置に挿入されるからである。
メニューから次のように選択する。
[表(A)] → [表の挿入(B)...] または、をクリックしてもよい。
[挿入(I)] → [表(T)...]でも同じである。
行数と列数を入力するダイアログが表示されるので、必要な値を入力して[OK]をクリックする。ここでは、2行、2列とする。
下図のように表の中に文字を入力する。表の大きさは入力した文字にあわせて広がる。
表の属性設定
表のタグはTABLE, TR, TD, である。カーソルを表の中に移動し、ウィンドウ右上の属性変更ボタンをクリックしてTDを選択する。左のようなダイアログが表示される。
このダイアログのタブは「セル」が選択されている。表の一つ一つの箱をセルという。「表」タブを選択すると表全体の属性、「表の行」タブを選択するとカーソルのある行全体の属性、「表の列」タブを選択するとカーソルのある列全体の属性を設定できる。したがって、現在の「セル」タブで設定する属性は現在カーソルのあるセルに対してということになる。
@ セル内の文字の位置を設定する。
水平位置揃え:(自動)、左揃え、中央揃え、右揃え
垂直位置揃え:(自動)、上揃え、中央揃え、下揃え
A セルの幅と高さを設定する。
単位はピクセルである。ただし、幅は表全体の幅の割合(パーセント)でも設定できる。
B セル内の背景を設定する。色を指定して、その色で塗りつぶす、または、画像を指定して表示することもできる。
タブの下にあるセルのタイプは通常「データセル(D)」が選択されているが、ここを「見出しセル(H)」に変更するとTHタグの設定となり、太字、中央揃えになる。
「表」タブを選択すると左図のようになる。表全体にかかる設定を行う。
@ 位置揃えと回り込みは、画像のときと同じである。
A 表全体の背景を設定する。
・表の幅、高さはセルと同じである。どちらもピクセル単位とページの割合で設定できる。
・罫線の幅は文字通りの意味である。
・セル内の余白は罫線とセル内のデータとの間隔である。下図は余白を10ピクセルにした例である。1カ所の設定で上下左右に同じ余白が設定される。
・枠表示のチェックをはずすと罫線は表示されない。レイアウトなどに使われる。この右のピクセルは枠のサイズである。下図は枠の幅を5ピクセルに設定した例である。
「セル内の余白」と「枠表示」のサイズをそれぞれ10ピクセル、5ピクセルに設定したときのHTMLソースを次に示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <H1>移動先のページです</H1> <P>移動できたでしょうか</P> <TABLE cellpadding="10" border="5"> <TBODY> <TR> <TD>1行、1列目</TD> <TD>1行、2列目</TD> </TR> <TR> <TD>2行、1列目</TD> <TD>2行、2列目</TD> </TR> </TBODY> </TABLE> <P><A href="index.html">元のページへ戻る</A></P> </BODY> </HTML>
ホームページの作成(ホームページビルダー6) | Copyright © 2002 Hiroshi Masuda |