基本タグ
テーブルというのは表みたいな物です。これは慣れるまで結構苦戦するかもしれませんので、詳しくやっていきます。まずは基本となるタグを見てみましょう。
<table border="1">
<tr><td> ここに要素を入れる </td></tr>
</table>
見てみると、<table>〜</table>で括られており、その中にさらに<tr><td>〜</td></tr>というタグで括られています。これがテーブルの基本的なタグになります。これを表示してみると、
これがテーブルです。このテーブルの中に文字や画像などなどを入れていく事ができます。この箱のようなものをセルといいます。また行や列のセルを増やす事もできます。
列を増やそう
テーブルの『列』を増やしてみましょう。列を増やすポイントは<td>タグにあります。
<table border="1">
<tr><td> 列１ </td><td> 列２ </td><td> 列３ </td></tr>
</table>
先ほどのテーブルと比べると、<td>タグが増えていることが分かります。つまり、<tr>タグの中の<td>〜</td>を増やす事で列つまり横のセルを増やす事ができるのです。
このように横にセルを増やす事ができました。次に行について説明しますが、列と混同しなよう気をつけましょう。
行を増やそう
次にテーブルの行を増やしてみます。行を増やすポイントは<tr>タグにあります。
<table border="1">
<tr><td> 行１ </td></tr>
<tr><td> 行２ </td></tr>
<tr><td> 行３ </td></tr>
</table>
今度は、<tr></tr>というタグが増えている事が分かります。これを行うことにより、『行』つまり縦のセルを増やす事ができます。
列と行について説明してきましたが、まず<tr>と<td>のタグの関係を覚えておきましょう。
行と列を増やす
行と列を同時に増やす事も可能です。長めのタグになりますので頑張りましょう。
<table border="1">
<tr><td> １ </td><td> ２ </td><td> ３ </td></tr>
<tr><td> ４ </td><td> ５ </td><td> ６ </td></tr>
<tr><td> ７ </td><td> ８ </td><td> ９ </td></tr>
</table>
このように列と行を同時に記述する事により、様々な形のテーブルを作成する事ができます。特にテーブルなどを記述する時は、見やすくする為に字下げに気を付けるようにしましょう。
セルとタグの関係を分かりやすくする為にサンプル画像を用意しました。どこのタグを増やせば、どこが増えるかという事を覚えておけば良いでしょう。
タグ内の指定
テーブルを構成するタグ、<table><tr><td>には複数の属性を指定する事ができます。またその効果はそれぞれ記述する場所により効果が異なりますので色々試してみてみましょう。
| <table>内の属性指定 |
| border="数値" | 枠線の指定を指定する事ができます。数字で設定することができ、値を大きくすると太くなる。『 0 』を指定する事で枠線を消すことができます。 |
| width="数値" | 表全体の横幅を指定する事ができます。ピクセルか%で横幅を設定する。 |
| height="数値" | 表全体の縦幅を指定する事ができます。ピクセルか%で縦幅を設定する。 |
| align="位置" | 表の位置を指定する事ができます。値は『left(左)』『center(中央)』『right(右)』で指定する事ができます。 |
| cellspacing="数値" | 枠線そのものの幅を指定する事ができます。 |
| cellpadding="数値" | セル内の余白を指定する事ができます。 |
| bgcolor="色コード" | 表全体の背景色をしてする事ができます。指定には『#ffffff』などのように記述する。 |
| background="画像パス" | 表全体に画像を設定する事ができます。値は画像のパスを指定します。 |
| <tr>内の属性指定 |
| align="位置" | セル内の文字列などの位置を指定します。<tr>の中に指定する事で横一列のセルを設定する事ができる。値は『left(左)』『center(中央)』『right(右)』で指定する事ができます。 |
| valign="位置" | セル内の文字列など上下の位置を指定します。<tr>の中に指定する事で横一列のセルを設定する事ができる。値は『top(上)』『middle(中央)』『bottom(下)』で指定する事ができます。 |
| bgcolor="色コード" | セル内の横一列の背景色をしてする事ができます。指定には『#ffffff』などのように記述する。 |
| <td>内の属性指定 |
| width="数値" | 指定セルの横幅を指定する事ができます。ピクセルか%で横幅を設定する。 |
| height="数値" | 指定セルの縦幅を指定する事ができます。ピクセルか%で縦幅を設定する。 |
| align="位置" | 指定セルの文字列など位置を指定します。
値は『left(左)』『center(中央)』『right(右)』で指定する事ができます。 |
| valign="位置" | 指定セルの文字列など上下の位置を指定します。値は『top(上)』『middle(中央)』『bottom(下)』で指定する事ができます。 |
| bgcolor="色コード" | 指定セルの背景色をしてする事ができます。指定には『#ffffff』などのように記述する。 |
| background="画像パス" | 指定セルに画像を設定する事ができます。値は画像のパスを指定します。 |
| colspan="数値" | 指定セルを横方向のセルと連結します。 |
| rowspan="数値" | 指定セルを縦方向のセルと連結します。 |
今までに比べると非常に多くの記述がされています。いきなり全てを覚える事は無理かもしれませんが、使いたい物を使いたい時にに使うのが良いかもしれません。これは慣れるより慣れろという事です。一応、一般的なテーブルの記述例を書いておきます。
<table border="1" width="200" height="75" cellspacing="1" cellpadding="2">
<tr><td width="200" height="25"> １ </td></tr>
<tr><td width="200" height="25"> ２ </td></tr>
<tr><td width="200" height="25"> ３ </td></tr>
</table>
横の連結
テーブルは連結して使う事ができます。まず横の連結から見てみましょう。
<table border="1">
<tr><td colspan="3"> ここを連結 </td></tr>
<tr><td> １ </td><td> ２ </td><td> ３ </td></tr>
<tr><td> ４ </td><td> ５ </td><td> ６ </td></tr>
</table>
このように、連結したいセルの<td>タグの中に『colspan="数値"』を指定します。この場合３つのセルをまたいでいますので、３になります。書き出してみると分かり易いと思います。
縦の連結
次に縦の連結を見てみましょう。縦の方が少し分かりにくいかもしれませんが頑張りましょう。
<table border="1">
<tr><td rowspan="3"> ここを連結 </td><td> １ </td><td> ２ </td></tr>
<tr><td> ３ </td><td> ４ </td></tr>
<tr><td> ５ </td><td> ６ </td></tr>
</table>
これもテーブルを書き出して実際に見てみた方が分かり易いと思います。どこが連結され、数字がどこに表示されてるか見てみてください。
