ホームページビルダー・グレート初心者講座

　表を使ってみましょう

表の基本的な使い方などを説明するページで、表の使い方を覚えるとレイアウトに使える為自由な配置を行うことができます。

表を挿入してみるまずは表を挿入してみます。編集画面の表を挿入したい位置にマウスを持っていき、左クリックします。するとカーソルが表示されるので　「表（A) 」 → 「表の挿入（B) 」と選択し表の行と列の数を設定した後、OK をクリックすると挿入されます。この表の設定を行うときは現在選択されているのが何かを良く見るのが重要で、簡単な表のレイアウトの場合確認しやすいと思いますが、表のセルの中にさらに表を入れる（入れ子）など複雑になってくると、どのセルが選択されているのかなどが分かり難くなってきますので注意しましょう。 ※ 注意事項セルの中が空の場合、ブラウザによっては表やセルがあっても画面には表示されません。空欄のセルとして利用したい場合は、「改行」や「スペース」、「セル色と同色の文字」などを入ると正しくセルが表示されます。表全体が選択されている状態です。表の一番外側のみピンクの選択枠が表示されている状態です。この選択状態から右クリックして属性を変えると表全体の設定が出ます。表の中の左上のセルだけが選択されている状態です。この選択状態から属性の変更などを行うと、この左上のセルのみの設定が表示され、設定した内容も左上のセルのみに設定が反映されます。慣れてくれば全く問題ありませんが、初めのうちは分かり難いと感じる方が多いかと思います。マウスで上手く選択できない場合は、十字キーの上下左右でもカーソルの位置が移動できますので、そちらもお試しください。　表の設定表又はセルが選択されている状態での設定を説明します。この状態で枠を右クリックし、属性の変更をすると表の設定がでます。「位置揃え」表を表示させる位置です。左そろえや上、センタリングなどができます。「回り込み」画像の挿入で説明したものと同じように文字などを回り込ませることが出来ます。上の選択している表の右横に書いてある説明文は画像設定の左寄せです。「表の幅」「表の高さ」これは表自体のサイズの設定で、ピクセルで設定するとそのサイズで表が固定されます。また、パーセントで設定すると、ブラウザのサイズに合わせて表のサイズが決定されるようになっています。例えば、表の幅を１００パーセントにすると、ブラウザを縮めても大きくしても、表の横幅はブラウザの大きさに追従し最大の大きさとなります。この設定もセルに対して行えば、設定したセルのみが最大サイズとなります。また、表の中に表を挿入して、中の表を１００パーセントにすると、外の表に合わせて中の表のサイズが自動的に変わるようになります。「２つのセルで表の幅を１００パーセントにした場合」ページの表示サイズに対して左右のセルが５０％になります。「左のセルが２０ピクセルで右のセルを１００パーセントにした場合」サイズをピクセルで指定した場合、そのセルは指定サイズで固定されます。片方がパーセント指定の場合、そちらのセルはページに対して相対的なサイズとなります。　表で作るメニュー当サイトのトップページのコンテンツ選択も表で作っています。（画像１）が作り始める時の表の状態です。それぞれどう設定されているかというと、画像の１のセルが幅１ピクセル、セルの背景に紺色。画像の２のセルが高さ２０ピクセル、セルの背景に紺色、表のタイトル。画像の３のセルの部分は何も設定しません。画像の４のセルは高さ１ピクセル、セルの背景に紺色を指定しています。罫線の幅０ピクセル、セル内の余白０ピクセルで「枠表示」のチェックボックスはOFFにしてあります。上記で設定していない幅、高さは変えない方がいいです。はじめから設定をせずにしておくと、なかに文章や画像を入れたとき自動的に表も広がってくれます。　逆に余分な所に数値を入れてしまうと表が広がってくれず、文字が勝手に改行してしまったりと変な事になりますが、以下の方法での注意事項で他にもやり方があり、レイアウトする場合などには逆に表やセルのサイズを固定した方が都合がいい場合もあります。（画像１　作成中）画像の３番の部分にリンクや解説を入れていくと、中に文章や画像を入れた分だけ表が広がっていきますのでとっても便利です。メニューの項目などを入れるのに丁度いいですね！　下の画像のようにメニューを表で飾ることができますので、やってみて下さい。ここでは表の操作のみで行いましたが、スタイルと合わせるともっと自由度の高い設定が可能です。（画像２　完成）　他にもその他にも表を使ったレイアウトの方法が沢山あります。とりあえずこのページではここまでにして、後の項目で応用として掲載していきます。ダイエットの為に注意として、表は何も入っていないセルでも記述されていきます。例えば、上の画像１で説明すると、９個のセルの表を作り、その中の１個のセルしか使っていなくて他のセルは色も枠もない状態でも９個のセルの記述をします。これが大規模な表で、細かな作りの表になってくるともの凄い容量を食い、作成していって気が付いた時には膨大な容量のページになっている事もあるので、表を作っていき、余分な所や何も入れない所が連続していたら、それらのセルを選択して、「選択セルの結合」で、１つのセルにしていきましょう。また、実際にはメニューの枠線などはスタイルシートを使って行うほうがいいですので、スタイルも合わせて使ってみてください。