ＨＴＭＬ－表（テーブル）－　　－ＨＴＭＬの基礎

表（テーブル）

■表（テーブル）の作成

ここでは表の作成方法を説明しています。このページに掲載しているタグは以下の通りです。

<table>　表を作成する
<table>　表の外枠の太さと色の指定
<table>　表の横幅・縦幅を設定する
<table>　表にタイトルをつける
<table>　表が表示する位置を設定する
<table>　セルの間隔とマージンの設定
<table>　セル内の文字位置を指定する
<table>　セルの背景を指定する
<table>　セルの結合
<table>　セル内の文字の改行を禁止

使用例
<table> 　　　　　　<tr> 　　　　　　　　<td>セルの内容</td> 　　　　　　</tr> 　　　　</table>

<table></table>の間に、<tr></tr> で列の定義、さらにその間に<td></td>でセルの定義をします。

また、表に見出しを設定したい場合は、<td></td>の代わりに、 <th></th>で、見出しを付けたいセルを定義します。
<th></th>で設定されたセルの文字は、太字でセルの中央に表示されます。

PAGETOP

■表の外枠の太さと色の指定　<table>

使用例
<table border="値" bordercolor="値">内容</table>

属性	属性の値	解説
border	ピクセル数	線の幅
bordercolor	色の名前またはカラーコード	線の色

border属性を設定しない場合、１ピクセルで設定されます。
線を消したい場合は、値に０を指定してください。

枠線の上と左・下と右の色をそれぞれ指定できるbordercolorlight・bordercolordark 属性があります。これを使用すると、枠線を立体的に見せる事ができますが、この属性はIEのみの仕様なのであえて説明は載せません。

PAGETOP

■表の横幅・縦幅を設定する　<table>

使用例
<table width="値" height="値">内容</table>

属性	属性の値	解説
width	ピクセル数または比率（%）	表の横幅
height	ピクセル数	表の縦幅

表の横幅はwidth属性で、ピクセル数かブラウザの
ウィンドウの幅に対する比率を指定します。

表の縦幅はheight属性で、ピクセル数を指定します。

PAGETOP

■表にタイトルをつける　<table>

使用例
<table> 　　　<caption>タイトルなどの文字列</caption> 　　　　　　<tr> 　　　　　　　　　<td>セルの内容</td> 　　　　　　</tr> 　　　</table>

表にタイトルなどを付ける時は、<caption></caption>を使います。
その時必ず、<table>の直後に記述します。

<caption></caption>にはalign 属性を指定する事が出来ます。

<caption align="top">
　　タイトルは表の上に表示されます。（指定しない場合も）
<caption align="bottom">
　　タイトルは表の下に表示されます。

PAGETOP

■表が表示する位置を設定する　<table>

使用例
<table align="値">表の内容</table>

属性	属性の値	解説
align	left center right	左揃え中央右揃え

表の表示位置を指定するにはalign属性を使用します。
省略した場合は左揃えになります。

PAGETOP

■セルの間隔とマージンの設定　<table>

使用例
<table cellspacing="値" cellpadding="値">内容</table>

属性	属性の値	解説
cellspacing	ピクセル数	セルとセル・外枠とセルの間隔を指定（省略時２ピクセル）
cellpadding	ピクセル数	セルとセル内の文字の間隔を指定（省略時１ピクセル）

表の外枠とセル・セルとセルの間隔を指定するには、
cellspacing属性を利用します。

また、セルとセル内の文字の間隔を指定するには、
cellpadding属性を利用します。

PAGETOP

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

使用例
<tr align="値" valign="値">内容</tr> <th align="値" valign="値">内容</th> <td align="値" valign="値">内容</td>

属性	属性の値	解説
align（横位置）	left center right	左揃え中央右揃え
valign（縦位置）	top middle bottom	上中央下

見出し文字を設定する<th></th>も文字の位置を指定できます。

PAGETOP

■セルの背景を指定する　<table>

使用例
<table background="ファイル名">内容</table> <table bgcolor="値">内容</table> <tr bgcolor="値">内容</tr> <th bgcolor="値">内容</th> <td bgcolor="値">内容</td>

属性	属性の値	解説
background	ファイル名のＵＲＬ（絶対パス、相対パスなど）	画像が背景に設定される
bgcolor	色名またはカラーコード	背景に色を設定

背景に設定する画像が、表よりも小さい場合は、
端からタイル上に並べて表示されます。

背景色はbgcolor属性で、表全体に同色を指定する事もできますし、セルごとに違う色を指定する事もできます。

PAGETOP

■セルの結合　<table>

使用例
<th colspan="値">内容</th> <th rowspan="値">内容</th> <td colspan="値">内容</td> <td rowspan="値">内容</td>

属性	属性の値	解説
colspan	結合するセルの数	セルを横に結合
rowspan	結合するセルの数	セルを縦に結合

セルを横に結合したい場合は、colspan属性を利用します。
セルを縦に結合したい場合は、rowspan属性を利用します。
これら２つの属性を<th></th>に設定する事で、見出しを結合する
事も出来ます。

PAGETOP

■セル内の文字の改行を禁止　<table>

使用例
<th nowrap>内容</th> <td nowrap>内容</td>

セル内の文字列は、表の大きさに合わせて自動的に改行されますが、nowrap属性を指定すると、改行しないようにする事ができます。

ただし、あまり長い文章にnowrap属性を指定すると、ウインドウが横に長くなってしまい、見づらくなるので注意しましょう。

PAGETOP

メール

質問メールがとても多くなった為、現在返信が遅れております。お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。申し訳ございませんが、その事をご理解いただいた上でご送信下さい。また、ここではHTMLの質問に関してのみ受け付けております。

メールはこちらから：ykrmain★★★eay.jp

PAGETOP

Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★

　Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★