ホームページの作成(ホームページビルダー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

 

 

inserted by FC2 system