表、テーブル

表は、データを整理する為に欠かせないものですが、ホームページ作成においては、レイアウトとしても使用でき、ページの見栄えの面でも欠かせません。

表の構造

表の構造をタグと照らし合わせて説明します。
2×2列の表の場合（右の表参照）
1列目に見出しセルを表示します。

<table border="1" cellspacing="2" width="300" cellpadding="3">
<tbody>
<tr>
<th>見出しセル左</th>
<th>見出しセル右</th>
</tr>
<tr>
<td>セル左</td>
<td>セル右</td>
</tr>
</tbody>
</table>

表を挿入

メニューの「表」→「表の挿入」をクリックするとダイヤログが出てきます。
表の挿入ダイヤログは以下のようにします。

• 表のサイズ
  • 行数・・・行数（縦列）の数を入力
  • 列数・・・列数（横列）の数を入力
• 表の属性
  • 表の幅をページ幅に合わせる
  • 表にスタイルを適用する
  • 表の枠を表示する
  • 空白セルに空白コードを自動挿入する
• 最初の行を見出しセルにする
  チェックすると、見出しセル「<th>」が最初の行に挿入されます。

表の属性

表（テーブル）を選択して、右クリックを押すと、「表の属性」ダイヤログが出てきます。
「表の属性」の設定では、以下の5つのタブに分かれています。

• 表の属性
  • 表・・・表全体の設定
  • 表の行・・・表の行（縦列）全体の設定
  • セル・・・表のセルのタイプを設定
  • 表の列・・・表の列（横列）全体の設定
  • 表のデザイン・・・表のスタイル（CSS）の設定

以下の図で表の属性の説明をします。

この画像で示した表のHTMLタグは以下のようになります。

<table border="2" width="370" height="219" cellspacing="10" cellpadding="10" bgcolor="#f5f5f5">
<caption>表題</caption>
<tbody>
<tr>
<th width="50%">見出し</th>
<th width="50%" valign="bottom" align="right">見出し</th>
</tr>
<tr>
<td>文章文章文章文章文章文章文章文章文章文章</td>
<td bgcolor="#ffe8e8">文章文章文章文章文章文章文章文章文章文章</td>
</tr>
</tbody>
</table>

表で使用する代表的なHTMLタグ

• border=""・・・表の枠線
• width=""・・・表の幅
• height=""・・・表の高さ
• cellspacing=""・・・罫線の幅
• cellpadding=""・・・セル内の余白
• valign=""・・・垂直位置揃え（上、中央、下）
• align=""・・・水平位置揃え（左、中央、右）
• caption・・・表題（使用方法：<caption>表題</caption>）

行、列の変更

表の行、列の変更は、ほぼエクセル感覚で出来ます。
変更したい表の列を選択し、それぞれ以下のツールバーより指定すれば変更できます。
2つ以上の行、列の変更は、複数選択し、ツールバーで指定します。結合、分割についても同じです。

表のスタイル指定

「右クリック」→「スタイルの設定」で表全体のスタイルを設定します。
テキスト-文字の間隔を空けると同様になります。
ここでは、用途別に説明していきます。

表内のテキスト

表内のテキストもテキスト-文字の間隔を空ける以下で説明したように設定できます。
表内のテキストの色を指定する場合は、「色と背景」タブの「前景色」で指定します。

HTMLタグでは、「style="color : 色;"」となります。
表内のテキスト文字を赤にした場合のHTMLタグは以下のようになります。

<table style="color : #ff0000;">

表の内の背景

背景は、「色と背景」タブの「背景色」で指定します。

表の属性で背景色を指定していた場合は、こちらのスタイルの設定での値が反映されます。
HTMLタグでは、「style="background-color : 色;"」となります。
表内の背景を赤にした場合のHTMLタグは以下のようになります。

<table style="background-color : #ff0000;">

表のレイアウト

表のレイアウトは、「スタイルの設定」→「レイアウト」タブで指定出来ます。
余白の指定は、マージン、パディングで指定。
枠線（ボーダー）は、ボーダーで指定します。
表は、上下左右の方向がありますが、これは個別に指定する事で出来ます。

画像では、マージンを5px、パディングを3px、ボーダーを標準・青色で指定しています。
これをHTMLタグで表すと以下のようになります。

<table style="padding-top : 3px;padding-left : 3px;padding-right : 3px;padding-bottom : 3px;margin-top :
5px;margin-left : 5px;margin-right : 5px;margin-bottom : 5px;border-width :
medium medium medium medium;border-style : solid solid solid solid;
border-color : blue blue blue blue;">

ホームページ・ビルダーでは、自動的にそれぞれ4方向（上下左右）ずつ指定していますが、
これを1つにまとめる事も出来ます。（しなくても良い）
まとめるには、全方向同じ値の場合に有効です。（HTMLタグ編集で行います）

<table style="padding : 3px;margin : 5px;border-width : medium;border-style : solid;border-color : blue;">