Home / Index / Prev / Next
10.表を作る
トップページが完成したので、続いてコンテンツのページを作るところですが、コンテンツのページは表（テーブル）を使って作りたいので、先に表の作り方に
ついて勉強し
ます。
構成ツールバーの
をクリックすると、[表の挿入]
ダイアログボックスが開きます。
[行数(R)]
縦何行（Rows）の表にするのかを指定します。
[列数(C)]
横何列（Cols）の表にするのかを指定します。
[幅(W)]
表の幅（Width）を指定します。単位は、ウィンドウに対する割合を示す % か、ピクセル数を指定することができます。%
を指定すると、ウィンドウの大きさを変えた時、表の幅も変わります。また、幅を指定しなければ（空白にすれば）、表の幅は、表の中の文字数や文字の大きさ
によって自動的に変わります。
[枠線(B)]
表の枠線（Border）の太さを指定します。枠線を 0 ピクセルまたは空白にすると枠線は表示されません。
Composer の[標準] モードでは、表がわかるように枠線が赤い点線で表示されます。
行数 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
キーを押すと、入力するセルを追加することができます。
セルの大きさは、セルの内容によって自動的に変わります。
下の表の幅は100 ピクセルですが、文字数によってセル幅が変わっています。
表の幅を指定していても、セルの内容が指定した幅に入りきらなければ、表は指定した幅よりも大きくなります。
ただし、画面に表示される大きさは変わっても、<table>タグの width プロパティの値は変わりません（width:
100px; のまま）。
abcdefg
|
hijklmn
|
opqrstuvwxyz
|
|
|
|
表の中で改行すると、セルの高さも変わります。
ただし、<table>タグに高さを指定する height プロパティは挿入されません。
abcd
ef
g
|
hi
|
jk
|
l
|
mnop
|
qrt
uvwxyz
|
■ 表の大きさの変更
表の大きさを変更するには、まず、作成した表の中にカーソルを置きます。
表示される小さい四角にカーソルを合わせて、マウスをドラッグすると大きさが変わります。
下の図は、表の高さを変えています。<table>タグに高さを指定する height プロパティとその値が挿入されます。
次の図は、表の高さと幅を変えています。<table>タグの width プロパティ、height プロパティの値も変わります。
■ 行・列の挿入と削除
わかりやすいように、行3×列3、幅100 ピクセルの表に数字を入れています。この表を使って、行・列の挿入と削除を説明します。
1 のセルにカーソルを置きます。
セルの左にある△印は行の挿入、×印は行の削除です。
上向きの△をクリックすると、上に1行挿入されます。
下向きの△をクリックすると、下に1行挿入されます。
×をクリックすると、行が削除されます。
セルの上にある△印は列の挿入、×印は列の削除です。
表の幅を100 ピクセルに指定しているので、挿入または削除をしても表の幅は変わらずに、その分セル幅が変わります。
左向きの△をクリックすると、左に1列挿入されます。
右向きの△をクリックすると、右に1列挿入されます。
×をクリックすると、列が削除されます。
■ 右クリックメニュー
表の中にカーソルを置いて、右クリックした時に表示されるメニューを見ていきます。
真ん中のセル5 にカーソルを置いて、右クリックしたところです。
右クリックメニューには、カーソルを置いた場所で機能するメニューが表示されます。
表を作るのには関係のないメニューも表示されていますが、ついでに説明しておきます。
[元に戻す(U)]
操作を誤ったときなどに、1つ前の工程の状態に戻す。
便利な機能なので、よく使います。
[すべてを選択(A)]
表示されているページの文字列や画像をすべて選択（反転表示）する。
使うことはないでしょう。
[テキストの装飾を一時中止(X)]
テキストの装飾を設定したままで文字を入力している場合に、途中で設定を中止する。
[リンクを作成(K)]
文字列や画像を使ったリンクを作成する。
文字列を範囲指定してからクリックすると、[リンクのプロパティ] ダイアログボックスが開き、リンク先 URL
を入力すればリンクを張ることができます。画像を範囲指定してからクリックすると、[画像のプロパティ] ダイアログボックスが開き、リンク先 URL
を入力すればリンクを張ることができます。範囲指定しないでクリックすると、[リンクのプロパティ]
ダイアログボックスが開き、リンクに使う文字列およびリンク先 URL を入力すればリンクを張ることができます。
ここからが、表を作る時に使うメニューです。
[セル プロパティ(P)]
セル・行・列および表全体のプロパティを設定することができます。
[表の挿入(I)]
[表(T)]
を選択すると [表の挿入] ダイアログボックスが開き、表の中に表を作ることができます。
[上に行を追加(R)]
を選択すると、上に1行追加されます。
[下に行を追加(B)]
を選択すると、下に1行追加されます。
[前に列を追加(O)]
を選択すると、前に1列追加されます。
[後に列を追加(A)]
を選択すると、後ろに1列追加されます。
[前にセルを追加(C)]
を選択すると、前にセルが追加されます。
[後にセルを追加(F)]
を選択すると、後ろにセルが追加されます。
[表の選択(S)]
表の選択は、表全体または表の一部を範囲指定したいときに使います。範囲を指定すると、その部分の文字を装飾したり、配置を変
えたりすることができます。
[表(T)]
を選択すると、表全体を範囲指定します。
[行(R)]
を選択すると、そのセルが含まれる行を範囲指定します。
[列(O)]
を選択すると、そのセルが含まれる列を範囲指定します。
[セル(C)]を選択すると、そのセルを範囲指定
します。
[すべてのセル(A)]
を選択すると、すべてのセルを範囲指定します。
[表の削除(D)]
[表(T)]
を選択すると、作成した表を削除します。
[行(R)]
を選択すると、そのセルが含まれる行を削除します。
[列(O)]
を選択すると、そのセルが含まれる列を削除します。
[セル(C)]
を選択すると、そのセルを削除します。
[セルの中身(N)]
を選択すると、そのセルの内容を削除します。
[セルを右へ結合(J)]
右隣のセルと結合し、2つのセルが1つになります。
セルを結合しなければ、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 つなので、<tr>要素の中に<td>要素は 2 つになりますが、2 列目と 3 列目の 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つのセルだけ背景色を指定しているので、<td>タグに背景色を指定するプロパティが挿入されます。
<td
style="vertical-align:
top;
background-color: rgb(204,
204, 255);">5<br>
</td>
表全体の背景色を指定しているので、<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
つのテーブルにしないで、いくつかに分割して作れば、表示速度を速くすることがきます。