表(テーブル)の表示

HTML において表を作るには、面倒ですが、テーブルタグ(<TABLE>)と行、列の
指定タグ(<TR>, <TD>)を使います。
書き方、

<TABLE BORDER="4" CELLSPACING="3">
<TR><TD>機械工学科１年</TD>
<TD>電気工学科１年</TD>
<TD>電子工学科１年</TD>
<TD>応用科学科１年</TD>
<TD>都市工学科１年</TD>
</TR>
<TR><TD>機械工学科２年</TD>
<TD>電気工学科２年</TD>
<TD>電子工学科２年</TD>
<TD>応用科学科２年</TD>
<TD>都市工学科２年</TD>
</TR>
</TABLE>

表示では、

のようになる。すなわち、<TR>〜〜</TR> で囲まれた範囲が、横一行分を表し、
<TD>〜〜</TD> で囲まれた範囲に 1 つのセルの中身を書き込みます。
また、テーブルタグ(<TABLE>) の中の BORDER オプションはテーブルの外枠の太さ
を示し、BORDER オプションを書かない場合は、外枠無しのテーブルになります。
デフォルト(BORDER だけの記述)では、BORDER="2" になっています。
CELLSPACING オプションは各セル枠線の太さを示し、デフォルト(記述無し)では、
BORDER オプションの太さと同じになります。
さらに、細かいオプションとして、枠線の色指定 ( BORDERCOLOR オプション)
やテーブル全体に色を付ける色指定( BGCOLOR オプション)などがあります。
テーブルの基本形へ戻る
簡単な HTML の書き方に戻る

使用例

<TABLE BORDER="4" CELLSPACING="3" BORDERCOLOR="#0000ff" BGCOLOR="#00ff00">
<TR BGCOLOR="#ffff00"><TD>機械工学科１年</TD>
<TD>電気工学科１年</TD>
<TD>電子工学科１年</TD>
<TD>応用科学科１年</TD>
<TD>都市工学科１年</TD>
</TR>
<TR BGCOLOR="#ffffff"><TD>機械工学科２年</TD>
<TD BGCOLOR="#808080">電気工学科２年</TD>
<TD BGCOLOR="#ff00ff">電子工学科２年</TD>
<TD>応用科学科２年</TD>
<TD>都市工学科２年</TD>
</TR>
</TABLE>

表示では、

のようになる。
すなわち、 BGCOLOR オプション は<TD BGCOLOR="#rrggbb">〜〜</TD> で囲まれた
範囲である各セルの色指定を最優先し、続いて<TR BGCOLOR="#rrggbb">〜〜</TR>
で囲まれた範囲の横一行分の色指定、最後にテーブルタグ<TABLE>〜〜<TABLE>の残り
が色指定される。
BORDERCOLOR オプション現在のところ外枠の色指定しか対応していないようです。

テーブルの基本形へ戻る
簡単な HTML の書き方に戻る

テーブルの右寄せ・左寄せ、テーブルとテキストとのスペース指定

書き方、

<TABLE BORDER="5" CELLSPACING="1" ALIGN="center" VSPACE="20" HSPACE="20">
<TR><TD>機械工学科 80 名</TD></TR>
<TR><TD>電気工学科 40 名</TD></TR>
<TR><TD>電子工学科 40 名</TD></TR>
<TR><TD>応用科学科 40 名</TD></TR>
<TR><TD>都市工学科 40 名</TD></TR>
</TABLE>

<BR>
<BR CLEAR="all">
<BR>

<TABLE BORDER="8" CELLSPACING="1" ALIGN="left" VSPACE="20" HSPACE="20">
<TR><TD>電気電子専攻 8 名</TD></TR>
<TR><TD>応用化学専攻 4 名</TD></TR>
<TR><TD>機械システム専攻 8 名</TD></TR>
<TR><TD>都市工学専攻 4 名</TD></TR>
</TABLE>

<pre><font color="#ff0000" size=4>  神戸高専(神戸市立工業高等専門学校)
では、左の表に示すように１学年の定員
が 240 名です。クラスとしては、機械
工学科だけが２クラスあり、他の学科は
１クラスづつあります。
  高専(高等専門学校)は５年制であるの
で、総定員は 1200 名となります。
  平成１０年度から卒業後にさらに２年
間の専攻科が設置され総定員は２４名
増えました。
  平成１２年度からは専攻科定員も２倍増加し、総定員は
１２４８名になります。
</font>
</pre>

表示では、

  神戸高専(神戸市立工業高等専門学校)
では、左の表に示すように１学年の定員
が 240 名です。クラスとしては、機械
工学科だけが２クラスあり、他の学科は
１クラスづつあります。
  高専(高等専門学校)は５年制であるの
で、総定員は 1200 名となります。
  平成１０年度から卒業後にさらに２年
間の専攻科が設置され総定員は２４名
増えました。
  平成１２年度からは専攻科定員も２倍増加し、総定員は
１２４８名になります。

のようになる。
  書き方で示したように、ALIGN オプション、VSPACE と HSPACE のスペース
オプションはそれぞれ、テーブルの配置の指定、テキストとのスペース幅(垂直、
水平方向)を指定する。
  テーブルの右寄せ(ALIGN="right")、センターリング(ALIGN="center")、
とデフォルト(ALIGN 指定無しは左寄せ(ALIGN="left"))の指定が可能である。
  テキストとのスペース幅は垂直方向(vspase="n1")、水平方向(HSPACE="n2")
のように n1, n2 にスペース分のピクセル数を指定する。

テーブルの基本形へ戻る
簡単な HTML の書き方に戻る

テーブルにキャプションや見出し(太字)をつける

テーブルタグ(<TABLE BORDER>) に続けて、キャプションタグ(<CAPTION ALIGN="top">)を
使うと、テーブル(表)上部のセンターに説明文を載せれます。
ALIGN オプションは ( ALIGN="top" ) と (ALIGN="bottom") があります。
デフォルト(ALIGN オプション無し)では、( ALIGN="top" ) になっている。
デーブルのキャプションは、科学技術関係の表示ルールでは、上に書くことになっており、
ALIGN オプションを使わないでよいでしょう。
終了タグは </CAPTION> です。
 
テーブルの中に見出し(太字)をつけることによって、中身がわかりやすくなります。
セルタグの <TD> の代わりに、 <TH> を使います。

書き方、

<TABLE BORDER ALIGN="center">
<CAPTION> 神戸高専専攻科の定員 
</CAPTION>
<TR ALIGN="center"><TH><BR></TH>
<TH>第一学年</TH>
<TH>第二学年</TH>
</TR>

<TR ALIGN="center"><TH>電気電子専攻</TH>
<TD>８名</TD>
<TD>８名</TD>
</TR>

<TR ALIGN="center"><TH>応用化学専攻</TH>
<TD>４名</TD>
<TD>４名</TD>
</TR>
</TABLE>

表示では、

のようになります。
上の例でも示したように、ALIGN オプションによって１行における文字の配置
(<TR ALIGN="right"> など )も指定できます。
セルごとに文字の配置を指定するなら、<TH ALIGN="center"> や <TD ALIGN="center"> 
を使えば良いでしょう。
デフォルト( ALIGN オプション無し)では、<TH ALIGN="center"> と <TD ALIGN="center">
になっています。
また、BGCOLOR オプションと同じく、ALIGN オプションの優先順位はセルの記述指定、
すなわち <TH ALIGN="center"> や <TD ALIGN="center">が最優先し、続いて
<TR ALIGN="center"> となります。
<TABLE ALIGN="center"> では、デーブル全体の配置を指定したことになり、
テーブルの中の文字配置まで指定できません。
空白セルを作るには、<TH><BR></TH> あるいは <TD><BR></TD>のように、
<BR> を挟み込むと良いでしょう。
 
テーブルの基本形へ戻る
簡単な HTML の書き方に戻る

セルを連結する

セルを縦方向に連結したり、横方向に連結したりする場合、ROWSPAN オプション や
COLSPAN オプション を使います。

書き方、

<TABLE BORDER ALIGN="center">
<CAPTION>
時間割</CAPTION>
<TR ALIGN="center"><TH><BR></TH>
<TH>１</TH>
<TH>２</TH>
<TH>３</TH>
<TH>４</TH>
<TH>５</TH>
<TH>６</TH>
<TH>７</TH>
<TH>８</TH>
</TR>
<TR ALIGN="center"><TH>月</TH>
<TD COLSPAN=2>数学 II </TD>
<TD COLSPAN=2>地理</TD>
<TD>ＨＲ</TD>
<TD COLSPAN=2>物理</TD>
<TD><BR></TD>
</TR>
<TR ALIGN="center"><TH>火</TH>
<TD COLSPAN=2>設計製図</TD>
<TD COLSPAN=2>英語 I </TD>
<TD COLSPAN=3>機械実習</TD>
<TD>化学</TD>
</TR>
<TR ALIGN="center"><TH>水</TH>
<TD>国語</TD>
<TD COLSPAN=2>英語 I </TD>
<TD>英語II</TD>
<TD COLSPAN=2>数学 I </TD>
<TD COLSPAN=2><BR></TD>
</TR>
<TR ALIGN="center"><TH>木</TH>
<TD COLSPAN=2>数学 I </TD>
<TD COLSPAN=2>歴史</TD>
<TD ROWSPAN=2 COLSPAN=4>卒業研究</TD>
</TR>
<TR ALIGN="center"><TH>金</TH>
<TD COLSPAN=2>保健体育</TD>
<TD COLSPAN=2>化学</TD>
</TR>
</TABLE>

表示では、

のようになる。
すなわち、縦方向のセル連結では、ROWSPAN=n のオプションを使い、n の数字は
連結するセルの数である。横方向のセル連結では、COLSPAN=n のオプションを使い、
n の数字はこれも連結するセルの数である。<TD ROWSPAN=n> や <TD COLSPAN=n> 
を書くと、その後の記述は、連結した数のセル分だけ減ることになる。


テーブルの基本形へ戻る
簡単な HTML の書き方に戻る