表を作る

◆ 表を作る

表は，全体を<TABLE border="X">～</TABLE>で囲み、各セルを <TD>～</TD>※で囲みます。

border属性の値を0～7まで指定でき、0にすると枠線がなくなります。

※ <TD>～</TD>のほかにも、見出しセルを表す<TH>～</TH>を使用することができます。<TH>～<TH>を使用した場合には、そのセル内の文字列が太字・中央揃えで表示されます。

HTMLソース

結果

<table border="1">
<td> テーブル </td>
</table>

テーブル

■ セルを複数作る

セルを複数作る

<table border="1">
<td> セル1 </td>
<td> セル2 </td>
</table>

■ 複数行のテーブル

セルの改行タグ<tr>を入れることで(<br>タグに似ていますね)２段、３段とセルを増やしていくことが出来ます。

<table border="1">
<td> セル1 </td>
<td> セル2 </td>
<tr>
<td> セル3 </td>
<td> セル4 </td>
</table>

セル1	セル2
セル3	セル4

■ テーブルの大きさを指定する

TABLE要素にwidth属性をつけることで、表全体の大きさを任意に指定できます。属性値はピクセルかウィンドウに対するパーセンテージで指定します。

<table border="1" width="300">
<td> セル1 </td>
<td> セル2 </td>
<tr>
<td> セル3 </td>
<td> セル4 </td>
</table>

セル1	セル2
セル3	セル4

■ テーブルやセルの高さを指定する

TABLE要素、TD要素にheight属性をつけることで、表全体の高さ、セルの高さを任意に指定できます。属性値はピクセルで指定します。

<table border="1" width="300" height="100">
<td height="70"> セル1 </td>
<tr>
<td height="30"> セル2 </td>
</table>

■ セルの大きさを指定する

TD要素にwidth属性をつけることで、表全体の大きさを任意に指定できます。属性値はピクセルかウィンドウに対するパーセンテージで指定します。

<table border="1">
<td width="50"> セル1 </td>
<td width="150"> セル2 </td>
</table>

■ 枠と文字の間隔を変える

TABLE要素にcellpadding属性をつけることで、枠と文字の間隔を任意に指定できます。属性値は0からのピクセルで指定します。 cellpadding="1" はcellpadding属性を指定しないのと同じことになります。

<table border="1" width="300" cellpadding="5">
<td> セル1 </td>
<td> セル2 </td>
</table>
<br>
<table border="1" width="300" cellpadding="0">
<td> セル1 </td>
<td> セル2 </td>
</table>

■ セルとセルの間隔を変える

TABLE要素にcellspacing属性をつけることで、セルとセルの間隔を任意に指定できます。属性値は0からのピクセルで指定します。属性値を2に指定した場合、cellspacingを指定しないのと同じになります。

<table border="1" width="300" cellspacing="5">
<td> セル1 </td>
<td> セル2 </td>
</table>
<br>
<table border="1" width="300" cellspacing="0">
<td> セル1 </td>
<td> セル2 </td>
</table>

■ 複数行、列にまたがるセル

TD要素にrowspan属性（行）、colspan属性（列）をつけることで、複数行、列にまたがるセルを作ることがきます。

<table border="1" width="300">
<td colspan="2">横貫通セル</td>
<tr>
<td>小セル1</td>
<td>小セル2</td>
</table>
<br>
<table border="1" width="300">
<td rowspan="2">縦貫通セル</td>
<td>小セル1</td>
<tr>
<td>小セル2</td>
</table>

横貫通セル
小セル1	小セル2

縦貫通セル	小セル1
	小セル2

■ セル内の文字の位置を指定する

TD要素にvalign属性と各種属性値をつけることで、セル内の文字の上中下位置を指定できます。

<table border="1" height="100">
<td valign="top">TOP</td>
<td valign="middle">MIDDLE</td>
<td valign="bottom">BOTTOM</td>
</table>

■ テーブル全体の背景色を指定する

テーブル全体の背景色を指定するには，TABLE要素にbgcolor属性をつけます。

ちなみに、表全体の背景色を指定した場合は、枠線もその色に合わせて変わりますが、TD要素の背景色を指定した場合は、枠線の色に影響しません。

<table border="1" width="300" bgcolor="#FFFF99">
<td> セル1 </td>
<td> セル2 </td>
<tr>
<td> セル3 </td>
<td> セル4 </td>
</table>

セル1	セル2
セル3	セル4

■セルの背景色を指定する

セルの背景色を指定するには、TD要素にbgcolor属性をつけます。

<table border="1" width="300" >
<td bgcolor="#FFFF99"> クリーム </td>
<td bgcolor="#808080"> グレー </td>
<tr>
<td bgcolor="#008000"> 緑 </td>
<td bgcolor="#0000ff"> 青 </td>
</table>

クリーム	グレー
緑	青

■ テーブルの枠線の色を指定する

テーブルの枠線の色を指定するには、TABLE要素にbordercolor属性をつけます。

<table border="1" width="300" bordercolor="#ff0000">
<td bgcolor="#FFFF99"> クリーム </td>
<td bgcolor="#808080"> グレー </td>
<tr>
<td bgcolor="#008000"> 緑 </td>
<td bgcolor="#0000ff"> 青 </td>
</table>

クリーム	グレー
緑	青

■ セルに背景画像を使用する

セルの背景色を指定するには、TD要素に background="X" 属性をつけXに背景画像の場所を指定します。

<table border="1" width="300" >
<td background="gazo/kabe1.gif"> 壁紙1 </td>
<td background="gazo/kabe2.gif"> 壁紙2 </td>
</table>

■ テーブルを区切り線（ライン、横線）として使う

枠線を消し、幅と高さを指定するとライン、横線として使うことができます。
TABLE要素に border="0" bgcolor="カラーコード" width="X" height="X" 属性をつけます。

<table border="0" bgcolor="#008000" width="300" height="5">
<td>
</td>
</table>

※HRタグでも同じ効果が出せます。

HTMLソース	結果
<hr size="5" color="#008000" width="300">

■ テーブルを写真の額縁として使う

TABLEタグを２重に使って額縁の様な効果を出すことが出来ます。

<table border="5" width="130" height="170" bgcolor="white">
<td>
<center>
<table border="1" width="116" height="80">
<td>
<img src="http://www.yasudaya.net/pworld/18/so_ch092.gif" width="82" height="130">
</center>
</td>
</table>
</td>
</table>