テーブル（表）の表示

ホーム　＞　HTML入門　＞　テーブル（表）の表示

表を作るときに必要な最低限の３つの要素を説明します。

<table>～～～</table>
この要素で囲んだ部分はテーブル（表）であることを宣言しています。

<tr>～～～</tr>
table要素の中に書きます。表の横一列を表しています。

<td>～～～</td>
tr要素の中に書きます。この要素で囲んだ部分は表の１つの部屋を表していてセルといいます。

これらの要素を下のように使います。

<table>
<tr>
<td>ここは１つ目のセルになります。</td>
</tr>
</table>

これだけでは分かりにくいので、表に枠を付けてみましょう。table要素の border属性で枠を付けることが出来ます。属性値は半角数字で指定します。

<table border="1">
<tr>
<td>ここは１つ目のセルになります。</td>
</tr>
</table>

tr要素の中にもう一つtd要素を追加するとセルが二つになります。ちなみに、td要素ではなく th要素を使うとセルに見出しがつきます。（太字になります）

<table border="1">
<tr>
<td>ここは１つ目のセルになります。</td>
<th>ここは２つ目のセルです。</th>
</tr>
</table>

ここは１つ目のセルになります。	ここは２つ目のセルです。

今は横に増やしましたが、次にたてにセルを増やす方法を説明します。たてに増やすにはtable要素の中にtr要素を追加すればいいだけです。

<table border="1">
<tr>
<td>ここは１つ目のセルになります。</td>
</tr>
<tr>
<td>たてにセルを増やしました。</td>
</tr>
</table>

ここは１つ目のセルになります。

たてにセルを増やしました。

table属性の cellspacing属性でセルとセルの幅を指定することができます。属性値は半角数字で指定します。

<table border="1" cellspacing="10">
<tr>
<td>ここは１つ目のセルになります。</td>
<th>ここは２つ目セルになります。</th>
</tr>
</table>

ここは１つ目のセルになります。	ここは２つ目セルになります。

次にセルの内容の大きさの指定方法を説明します。table属性の cellpadding 属性でセルの内容の大きさを指定できます。属性値は半角数字で指定します。

<table border="1" cellpadding="10">
<tr>
<td>ここは１つ目のセルになります。</td>
</tr>
</table>

td、th要素の bgcolor属性でセル内の色を指定することができます。属性値には色名や１６進数カラーコードを指定できます。

<table border="1">
<tr>
<td bgcolor="aqua">ここは１つ目のセルになります。</td>
</tr>
</table>

table属性の cellspacing属性でセルとセルの幅を指定することができます。属性値は半角数字で指定します。

<table border="1" cellspacing="10">
<tr>
<td>ここは１つ目のセルになります。</td>
<th>ここは２つ目セルになります。</th>
</tr>
</table>

ここは１つ目のセルになります。	ここは２つ目セルになります。

<table border="1" cellpadding="10">
<tr>
<td>ここは１つ目のセルになります。</td>
</tr>
</table>

td、th要素の rowspan、colspan属性でセルを連結（つなげる）ことができます。rowspan属性には縦に、colspan属性には横に連結する数を指定します。属性値は半角数字で指定します。

<table border="1">
<tr>
  <td colspan="2">ここは１つ目のセルになります。</td>
</tr>
<tr>
  <td>セルを連結</td>
  <th>しています。</th>
</tr>
</table>

ここは１つ目のセルになります。
セルを連結	しています。