【第３５講】表(1)・表の構成

（1998年11月24日更新）

【There have been visitors since 1997. 9.24.】

　ここからは、表（テーブル）の作り方を詳しく扱います。

【テーブル：TABLE】
<TABLE>〜表の内容〜</TABLE>
<TABLE  BORDER>〜表の内容〜</TABLE>

　開始タグ<TABLE>と終了タグは</TABLE>を記述して、この間が表の内容であることを宣言します。開始タグにBORDER属性をつけて<TABLE BORDER>とすると、表の枠が表示されます。

【テーブルの行】
<TR>〜１行分の内容〜</TR>

　すでにExcelで習ったように、表の1マスを「セル」、横に並んだセルを「行」、縦に並んだセルを「列」といいましたね。HTML文書では、この「行」を中心に表の内容を指定します。つまり、開始タグ<TR>と終了タグ</TR>の間が1行ということになり、1行分のセルの内容を記述するスペースということになります。

【テーブルのセル】
<TH>〜見出し１セル分の内容〜</TH>
<TD>〜普通の１セル分の内容〜</TD>

　この開始タグと終了タグの間に書き込んだ内容が1つの「セル」になります。<TH>は見出しセルで太字になり、<TD>は普通のセルでこちらをよく使います。これを上の<TR>〜</TR>の間にいくつも記述してやれば、1行にたくさんのセルを作ることができますね。

【テーブルのタイトル】
<CAPTION  ALIGN=align>〜表のタイトル〜</CAPTION>
※align＝{top,bottom}

　表のタイトルを中央揃えで配置します。ALIGN属性の値alignがtopなら表の上に、bottomなら表の下にタイトルが配置されることになります。

<TABLE BORDER> <CAPTION ALIGN=top>表の例</CAPTION> <TR><TD>A1</TD><TD>B1</TD><TD>C1</TD><TD>D1</TD></TR> <TR><TD>A2</TD><TD>B2</TD><TD>C2</TD><TD>D2</TD></TR> <TR><TD>A3</TD><TD>B3</TD><TD>C3</TD><TD>D3</TD></TR> <TR><TD>A4</TD><TD>B4</TD><TD>C4</TD><TD>D4</TD></TR> </TABLE>

（表示結果）

【セル内容の横方向の位置揃え】
<TD  ALIGN=align>〜</TD>
※align＝{left,center,right}

　セル内の文字の横方向の配置指定はALIGN属性です。もう何度も出てきているので大丈夫ですよね。左寄せならleft、センタリング（中央寄せ）ならcenter、右寄せならrightです。ALIGN属性を指定しない場合は左寄せになります。

【セル内容の縦方向の位置揃え】
<TD  VALIGN=valign>〜</TD>
※valign＝{top,middle,bottom}

　セル内の文字の縦方向の配置指定はVALIGN属性です。もう何度も出てきているので大丈夫ですよね。上寄せならtop、中央寄せならmiddle、下寄せならbottomです。VALIGN属性を指定しない場合は上寄せになります。

<TABLE BORDER> <TR><TD>指定しない場合</TD><TD>指定しない場合</TD></TR> <TR><TD ALIGN=center>中央揃え</TD><TD ALIGN=right>右寄せ</TD></TR> <TR><TD>指定なし</TD><TD ALIGN=left>左寄せ</TD></TR> </TABLE><P> <TABLE BORDER> <TR><TD>２行分<BR>あります</TD><TD>指定なし</TD><TD VALIGN=top>上寄せ</TD><TD VALIGN=middle>中央寄せ</TD><TD VALIGN=bottom>下寄せ</TD></TR> </TABLE>

（表示結果）

２行分 あります

指定なし

上寄せ

中央寄せ

下寄せ

【第３６講】表(2)・枠の幅とサイズ

【第３５講】に関する質問フォーム

【第３４講】箇条書き(4)・応用編