テーブル(table)の基本構造

テーブルとはＨＴＭＬにおける「表」のことを言います。
table(表)は、まず表全体を<table>〜</table>タグで囲んで、次に行を<tr>〜</tr>、セルを<td>〜</td>で表します。

各タグについての説明

tableタグ 　〜テーブル(表)全体を表します〜

テーブルを設置することを宣言する為のタグです。

【記述例】

<table border="外枠の太さ">〜</table>

と記述し、外枠の太さの数字を変更することでテーブルの枠の太さを変更することができます。
ちなみに「０」にするか数字を記入しなければ、枠は表示されません。

trタグ 　〜テーブルの行〜

【記述例】

<tr>〜</tr>でテーブルの1行を表します。
この中に下の<td>〜</td>・<th>〜</th>タグを入れることでセルを増やすことができます。

<td>〜</td> ・ <th>〜</th>　〜テーブルの列〜

【記述例】

テーブル(表)の列を表します。
通常のセルの場合は<td>〜</td>タグを使います。
<th>〜</th>タグは『見出しタグ』と呼ばれ、一般的なブラウザーでは太字でセンタリング(中央揃え)で表示されます。

上記の3つのタグが一組になってテーブル(表)を形成しています。

実際にテーブルを作ってみよう！！�@

それでは、実際にtableタグを使って下のようなテーブルを作ってみましょう。

【作成例】

【記入例】

<table border="1">
<tr>
<td>あいうえお</td>
</tr>
</table>

テーブルを作る時には、必ず「table」「tr」「td（もしくはth）」の3つのタグをセットで記入しなければいけません。

そして、<table>〜</table>の中に<tr>〜</tr>を、<tr>〜</tr>の中に<td>〜</td>を記入します。

実際にテーブルを作ってみよう！！�A

それでは今度は、3行3列のテーブルを作ってみましょう。

【作成例】

【記入例】

<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>

これが3行3列のテーブルの作り方です。

１つのテーブルの中に３つの行(trタグ)が、１つの行(tr)の中に３つのセル(tdタグ)が入ってるのが分かりますか？

このようにして<tr>〜</tr>の数を増やすと行数を、<td>〜</td>の数を増や すとセルの数(列)を増やすことが出来ます。

テーブルの中に画像を挿入する

もちろんセルの中には画像を入れることもできます。

【作成例】

この場合は下のように記入します。

【記入例】

<table width="300" border="1">
<tr>
<td>
<img src="img/table/butakim.jpg" width="150" height="100" />
</td>
<td>おいしそうなLunch</td>
</tr>
</table>

画像挿入のタグ<img src="画像URL">をセル<td>〜</td>の中に入れてあげれば完成です。
このような感じでフォトアルバムなんかを作っても楽しいかもしれませんね！(画像の挿入方法はこちら)