Home / Index / Prev / Next

10.表を作る

トップページが完成したので、続いてコンテンツのページを作るところですが、コンテンツのページは表(テーブル)を使って作りたいので、先に表の作り方に ついて勉強し ます。
構成ツールバーのテーブルアイコンをクリックすると、[表の挿入] ダイアログボックスが開きます。
表の挿入ダイアログ
[行数(R)]
縦何行(Rows)の表にするのかを指定します。

[列数(C)]
横何列(Cols)の表にするのかを指定します。

[幅(W)]
表の幅(Width)を指定します。単位は、ウィンドウに対する割合を示す % か、ピクセル数を指定することができます。% を指定すると、ウィンドウの大きさを変えた時、表の幅も変わります。また、幅を指定しなければ(空白にすれば)、表の幅は、表の中の文字数や文字の大きさ によって自動的に変わります。


[枠線(B)]
表の枠線(Border)の太さを指定します。枠線を 0 ピクセルまたは空白にすると枠線は表示されません。
Composer の[標準] モードでは、表がわかるように枠線が赤い点線で表示されます。
枠線0ピクセルの表10

行数 2、列数 3、幅 100 ピクセル、枠線 1 ピクセルの表を作ってみます。
表の挿入ダイアログ
縦が行、横が列で、表の中の1マスを「セル」と言います。セル数は2×3=6個になりますね。






この表の HTML ソースはこうなります。
<table style="width: 100px; text-align: left;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br></td>
      <td style="vertical-align: top;"><br></td>
      <td style="vertical-align: top;"><br></td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br></td>
      <td style="vertical-align: top;"><br></td>
      <td style="vertical-align: top;"><br></td>
    </tr>
  </tbody>
</table>
表は<table>要素で、<table>~</table>で囲まれた部分が1つの表になります。
開始タグ<table>には、表全体に関するプロパティを記入します。width は表の幅、text-align は表の位置を CSS で指定しています。borderは枠線の太さ、cellpadding はセルとセルの内容との間隔、cellspacing はセルとセルの間隔を指定しています。
<tbody>は、表を<thead>、<tbody>、<tfoot>の3つに分けて指定する時に使 うタグですが、Composer には、<thead>、<tfoot>を指定する機能はありません。
<tr>は、行(Table Rows)を指定するタグで、<tr>~</tr>が1つの列になります。上の表は2行なので、<tr>も2つあり ます。
<td>は、セルの内容(Table Data)を指定するタグで、<td>~</td>が1つのセルになります。上の表はセルが6個なので、<td>も 6 つあります。vertical-align はセルの内容の縦位置を指定するプロパティで、値には top(上)、middle(中)、bottom(下)があります。
本来、セルの内容にある<br>は必要ないのですが、<br>がないと入力する場所がなくなるので、自動的に挿入されます。

■ セルの内容の入力

セルの内容を入力するには、入力したいセルにカーソルを置いて入力するだけです。
セルの内容には、文字列以外にも、画像を貼り付けたり、セルの中に別の表を入れることもできます。
マウスまたは方向キーで上下左右にカーソルを動かしながら、セルの内容を入力していきます。また、Tab キーを押すと、次のセルにカーソルが移動します。下の表の場合は、Tab キーを押すごとに、1→2→3→4→5→6 と移動し、さらに Tab キーを押すと、入力するセルを追加することができます。
1
2
3
4
5
6

セルの大きさは、セルの内容によって自動的に変わります。
下の表の幅は100 ピクセルですが、文字数によってセル幅が変わっています。
1 23 456



1
23
456
123
45
678
表の幅を指定していても、セルの内容が指定した幅に入りきらなければ、表は指定した幅よりも大きくなります。
ただし、画面に表示される大きさは変わっても、<table>タグの width プロパティの値は変わりません(width: 100px; のまま)。
abcdefg
hijklmn
opqrstuvwxyz



表の中で改行すると、セルの高さも変わります。 ただし、<table>タグに高さを指定する height プロパティは挿入されません。
abcd
ef
g
hi
jk
l
mnop

qrt
uvwxyz

■ 表の大きさの変更

表の大きさを変更するには、まず、作成した表の中にカーソルを置きます。
作成したテーブル
表示される小さい四角にカーソルを合わせて、マウスをドラッグすると大きさが変わります。
下の図は、表の高さを変えています。<table>タグに高さを指定する height プロパティとその値が挿入されます。
表の高さを変える10
次の図は、表の高さと幅を変えています。<table>タグの width プロパティ、height プロパティの値も変わります。
表の高さと幅を変える

■ 行・列の挿入と削除

わかりやすいように、行3×列3、幅100 ピクセルの表に数字を入れています。この表を使って、行・列の挿入と削除を説明します。
1
2
3
4
5
6
7
8
9

1 のセルにカーソルを置きます。
テーブルにカーソルを置いた図
セルの左にある△印は行の挿入、×印は行の削除です。
表の上に1行挿入
上向きの△をクリックすると、上に1行挿入されます。
下に1行挿入する
下向きの△をクリックすると、下に1行挿入されます。
1行削除する10
×をクリックすると、行が削除されます。

セルの上にある△印は列の挿入、×印は列の削除です。
表の幅を100 ピクセルに指定しているので、挿入または削除をしても表の幅は変わらずに、その分セル幅が変わります。
左に1列挿入
左向きの△をクリックすると、左に1列挿入されます。
右に1列挿入
右向きの△をクリックすると、右に1列挿入されます。
1列削除
×をクリックすると、列が削除されます。

■ 右クリックメニュー

表の中にカーソルを置いて、右クリックした時に表示されるメニューを見ていきます。
表にカーソルを置いて右クリック


真ん中のセル5 にカーソルを置いて、右クリックしたところです。
右クリックメニューには、カーソルを置いた場所で機能するメニューが表示されます。
表を作るのには関係のないメニューも表示されていますが、ついでに説明しておきます。

[元に戻す(U)]
操作を誤ったときなどに、1つ前の工程の状態に戻す。
便利な機能なので、よく使います。

[すべてを選択(A)]
表示されているページの文字列や画像をすべて選択(反転表示)する。
使うことはないでしょう。

[テキストの装飾を一時中止(X)]
テキストの装飾を設定したままで文字を入力している場合に、途中で設定を中止する。

[リンクを作成(K)]
文字列や画像を使ったリンクを作成する。
文字列を範囲指定してからクリックすると、[リンクのプロパティ] ダイアログボックスが開き、リンク先 URL を入力すればリンクを張ることができます。画像を範囲指定してからクリックすると、[画像のプロパティ] ダイアログボックスが開き、リンク先 URL を入力すればリンクを張ることができます。範囲指定しないでクリックすると、[リンクのプロパティ] ダイアログボックスが開き、リンクに使う文字列およびリンク先 URL を入力すればリンクを張ることができます。

ここからが、表を作る時に使うメニューです。
[セル プロパティ(P)]
セル・行・列および表全体のプロパティを設定することができます。

[表の挿入(I)]
表の挿入を選択[表(T)] を選択すると [表の挿入] ダイアログボックスが開き、表の中に表を作ることができます。
[上に行を追加(R)] を選択すると、上に1行追加されます。
1
2
3



4
5
6
7
8
9
[下に行を追加(B)] を選択すると、下に1行追加されます。
1
2
3
4
5
6



7
8
9

[前に列を追加(O)] を選択すると、前に1列追加されます。
1

2
3
4

5
6
7

8
9
[後に列を追加(A)] を選択すると、後ろに1列追加されます。
1
2

3
4
5

6
7
8

9
[前にセルを追加(C)] を選択すると、前にセルが追加されます。
1
2
3
4

5
6
7
8
9
[後にセルを追加(F)] を選択すると、後ろにセルが追加されます。
1
2
3
4
5

6
7
8
9

[表の選択(S)]表の選択を選択
表の選択は、表全体または表の一部を範囲指定したいときに使います。範囲を指定すると、その部分の文字を装飾したり、配置を変 えたりすることができます。
[表(T)] を選択すると、表全体を範囲指定します。
[行(R)] を選択すると、そのセルが含まれる行を範囲指定します。
[列(O)] を選択すると、そのセルが含まれる列を範囲指定します。
[セル(C)]を選択すると、そのセルを範囲指定 します。
[すべてのセル(A)] を選択すると、すべてのセルを範囲指定します。
[表の削除(D)]表の削除を選択
[表(T)] を選択すると、作成した表を削除します。
[行(R)] を選択すると、そのセルが含まれる行を削除します。
1
2
3
7
8
9
[列(O)] を選択すると、そのセルが含まれる列を削除します。
1
3
4
6
7
9
[セル(C)] を選択すると、そのセルを削除します。
1
2
3
4
6
7
8
9
[セルの中身(N)] を選択すると、そのセルの内容を削除します。
1
2
3
4

6
7
8
9

[セルを右へ結合(J)]
右隣のセルと結合し、2つのセルが1つになります。
1
2
3
4
5
6
7
8
9
セルを結合しなければ、1 列にセルが3 つあるので、<tr>要素の中に<td>要素は 3 つですが、セルを結合すると、セルは2 つになるので、<td>要素は 2 つです。セルの横連結を指定するプロパティは、colspan で、プロパティ値は結合するセルの数になります。
<tr>
  <td style="vertical-align: top;">1<br></td>
  <td style="vertical-align: top;">2<br></td>
  <td style="vertical-align: top;">3<br></td>
</tr>
<tr>
  <td style="vertical-align: top;">4<br></td>
  <td colspan="2" style="vertical-align: top;">5<br>6<br></td>
</tr>
Composer のメニューにはありませんが、縦連結を指定するプロパティは、rowspan です。
1
2
3
4
1 列にセルは 2 つなので、<tr>要素の中に<td>要素は 2 つになりますが、2 列目と 3 列目の 1 つ目のセルは、1 列目の 1 つ目のセルに連結されているので、2 列目と 3 列目の<td>要素は 1 つになります。
<tr>
  <td style="vertical-align: top;" rowspan="3">1<br></td>
  <td style="vertical-align: top;">2<br></td>
</tr>
<tr>
  <td style="vertical-align: top;">3<br></td>
</tr>
<tr>
  <td style="vertical-align: top;">4<br></td>
</tr>

[表またはセルの背景色(B)]
表またはセルの背景色を選択[表またはセルの色] ダイアログボックスが開きます。
背景(B) で、表かセルを選択し、背景色を指定します。
1
2
3
4
5
6
7
8
9
1つのセルだけ背景色を指定しているので、<td>タグに背景色を指定するプロパティが挿入されます。
<td style="vertical-align: top;
 background-color: rgb(204, 204, 255);">5<br>
</td>
1
2
3
4
5
6
7
8
9
表全体の背景色を指定しているので、<table>タグに背景色を指定するプロパティが挿入されます。
<table style="width: 100px; text-align: left; background-color: rgb(204, 204, 255);"
border="1" cellpadding="2" cellspacing="2">

表の作り方は次のページに続きます。

テーブルによるレイアウト
テーブルは、集計結果などを表示するために用いられるものですが、HTML ではページのレイアウトを整える目的に使われることが多いようです。レイアウトなどのページの見栄えに関する指定は、本来、 CSS を使うべきと言われていますが、現実には CSS ではブラウザによって見え方が異なる場合があることや、テーブルを使ったほうがわかりやすく、思い通りのレイアウトが作りやすい場合が多々あるため、どう してもテーブルが多用されて しまいます。実際のところ、大きな会社のホームページ(おそらくプロが作っている)でも、テーブルでレイアウトを指定している場合が多く見られます。
Composer においても、CSS を使ってレイアウトを作ることは難しく、テーブルを使えばある程度のレイアウトを作ることが可能です。
ただし、テーブルでレイアウトを作ると、テーブルの内容がすべて読み込まれてから表 示されるため、ブラウザに表示される速度が遅くなります。テーブルの中にテーブルを作ったり、画像ファイルを入れるとさらに遅くなってしまいます。
したがって、テーブルをレイアウトに使う場合には、1 ページ分を全部 1 つのテーブルにしないで、いくつかに分割して作れば、表示速度を速くすることがきます。

Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座