ＭＥＮＵへ 元のページに戻る
テーブルを使う
ＭＥＮＵ
■ 1 基本的なテーブル　　<table>〜</table>
■ 2 項目を連結する　　<td colspan=n>
■ 3 テーブルの枠線　　border=n
■ 4 テーブルの色　　bordercolor= 、 bgcolor=
■ 5 テーブルの配置　　
■ 6 テーブルの行内表示　　
■ 7 テーブルのセル内表示　　

Top へ

■ 1 基本的なテーブル


テーブル（表）を作成するには主に次のタグを用いる。

<table border=1>
<tr><td>ＡＢＣ</td><td>ＤＥＦ</td><td>ＧＨＩ</td></tr>
<tr><td>いろはにほへと</td><td>ちりぬるお</td><td>あいうえお</td></tr>
</table>

これをブラウザで表示すると次のようになる。



ＡＢＣＤＥＦＤＥＦ


いろはにほへとちりぬるおあいうえお

Top へ

■ 2 項目を連結する


<td colspan=n> を用いると、右方向に n 個の項目を連結することができます。

<table border=1>
<tr><td colspan=2>ＡＢＣＤＥＦ</td><td>ＧＨＩ</td></tr>
<tr><td>Ｊ</td><td>ＫＬ</td><td>Ｍ</td></tr>
</table>

これをブラウザで表示すると次のようになる。



ＡＢＣＤＥＦＧＨＩ


ＪＫＬＭ

<td rowspan=n> を用いると、縦方向に n 個の項目を連結することができる。

<table border=1>
<tr><td rowspan=2>１</td><td>２</td><td>３</td></tr>
<tr><td>４</td><td>５</td></tr>
</table>

これをブラウザで表示すると次のようになる。



１２３


４５

Top へ

■ 3 テーブルの枠線


border=n を指定することにより、テーブルの枠線を立体感のあるものにすることができる。

<table border=20>
<tr><td>Ａ</td><td>Ｂ</td><td>Ｃ</td></tr>
<tr><td>Ｄ</td><td>Ｅ</td><td>Ｆ</td></tr>
</table>

これをブラウザで表示すると次のようになる。



ＡＢＣ


ＤＥＦ

また、cellspacing=0 を指定することにより、テーブルの枠線を無くすことができる。

<table border=0 cellspacing=0>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになる。



●■▲


○□△

Top へ

■ 4 テーブルの色


bordercolor= や bgcolor= で、テーブルに色をつけることができる。
<table border=1 bordercolor=red>
<tr bgcolor=yellow><td>●</td><td>■</td><td>▲</td></tr>
<tr><td bgcolor="#ccccff">○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。



●■▲


○□△

Top へ

■ 5 テーブルの配置


テーブルの配置は、align= などで指定できる。 
<table border=1>
<tr><td>このテーブルは</td><td>枠線表示のほかには<br>属性指定していない。	</td></tr>
</table>
	

	
このテーブルは枠線表示のほかには
属性指定していない。

	

	
<table border=1> width=80%>
<tr>
<td>このテーブルは</td>
<td>枠線を表示させて<br>横幅を８０％に設定している。</td>
</tr>
</table>
	

	
このテーブルは
	枠線を表示させて
横幅を８０％に設定している。

	

	
<table border=1 align=right>
<tr>
<td>このテーブルは</td>
<td>枠線を表示させて<br>右側に表示させている。</td>
</tr>
</table>
	

	
このテーブルは枠線を表示させて
右側に表示させている。
■ 属性一覧
ボーダー関連属性意味
border=nH3-H4s/e2/N2。枠線の太さを指定する。
この属性を記述しない、または、0 を指定すると枠線を表示しない。
bordercolor=colore2/N4。枠線の色を指定する。
bordercolordark=colore2。立体的な枠線の暗い部分の色を指定する。
bordercolorlight=colore2。立体的な枠線の明るい部分の色を指定する。
frame=frameH4s/e3。各セルの上下左右の枠線について、表示する/しないを制御する。
　　void：表示しない。（既定値）
　　above：上側のみ。
　　below：下側のみ。
　　hsides：上下のみ。
　　vsides：左右のみ。
　　lhs：左側（Left Hand Side）のみ。
　　rhs：右側（Right Hand Side）のみ。
　　box：上下左右。
　　border：上下左右。
rules=rulesH4s/e3。テーブルの内側の枠線を表示するルールを指定する。
　　none：表示しない。
　　groups：<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
　　rows：横方向のみ。
　　cols：縦方向のみ。
　　all：すべて。（規定値）
背景関連属性意味
background=urle3/N4。背景画像を指定する。<tr>, <th>, <td> でも指定可能。
bgcolor=colorH4t/e2/N3。背景色を指定する。<tr>, <th>, <td> でも指定可能。
配置関連属性意味
align=alignH3-H4t/e2/N2。テーブルの表示位置を指定する。
　　center：中央表示（H3/e2/N4）
　　left：左端表示（H2/e2/N2）（既定値）
　　right：右端表示（H2/e2/N2）
cellpadding=nH3-H4s/e2/N2。枠線とセルの内容の間の隙間をピクセル単位で指定する。
cellspacing=nH3-H4s/e2/N2。内枠の太さを指定する。0 を指定すると、立体感の無い枠線を表示することができる。
height=ne2/N2。テーブルの高さをピクセルまたはパーセンテージで指定する。
hspace=nN2。テーブルの周りの横方向の余白をピクセル単位で指定する。
vspace=nN2。テーブルの周りの縦方向の余白をピクセル単位で指定する。
width=nH3-H4s/e2/N2。テーブルの横幅をピクセルまたはパーセンテージで指定する。
一般属性属性意味
class=classH4s/e3/N4。クラスを指定する。
dir=dirH4s/e5/N6。文字の表示方向を指定する。
id=idH4s/e3/N4。IDを指定する。
lang=langH4s/e4/N6。言語を指定する。
language=languagee4。スクリプト言語を指定する。
style=styleH4s/e3/N4。スタイルシートを指定する。
title=titleH4s/e4/N6。タイトルを指定する。
その他属性意味
cols=ne3/N4。列数を指定する。
この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。
datapagesize=sizee4。データバインド機能を用いる際の、レコード数を指定する。
datasrc=datasrce4。データバインド機能を用いる際の、データソースの ID を指定する。
summary=summaryH4s。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述する。


Top へ

■ 6 テーブルの行内表示

align=、cellpadding=n、cellspacing=n などでテーブル行単位での文字やイメージの配置を指定できる。 
<table border="1">
<tr align="right">
<td>この列の表示は全て右詰で<br>表示されます。</td>
<td>この列の表示は全て右詰で<br>表示されます。</td>
</tr>
</table>




この列の表示は全て右詰で
表示されます。		
この列の表示は全て右詰で
表示されます。		





<table border="1">
<tr valign="bottom"  height=80>
<td>この列の表示は全て<br>高さ＝３０の<br>下揃えで<br>表示されます。</td>
<td>valign="bottom"のテスト</td>
</tr>
</table>




この列の表示は全て
高さ＝３０の
下揃えで。		
valign="bottom"のテスト





<table border="1">
<tr bgcolor="blue">
<td>この列の背景色は<br>全て青色で表示されます。</td>
<td><font color="white">bgcolor="blue"のテスト</font></td>
</tr>
</table>




この列の背景色は
全て青色で表示されます。		
bgcolor="blue"のテスト
■ 属性一覧
ボーダー関連属性意味
bordercolor=colore2。枠線の色を指定する。
bordercolordark=colore2。立体的な枠線の暗い部分の色を指定する。
bordercolorlight=colore2。立体的な枠線の明るい部分の色を指定する。
背景関連属性意味
background=urlN4。背景画像を指定する。<table>, <th>, <td> でも指定可能です。
bgcolor=colorH4t/e2/N3。背景色を指定する。<table>, <th>, <td> でも指定可能です。
配置関連属性意味
align=alignH3-H4s/e2/N2。セル内データの横方向の配置を指定する。
　　center：中央表示（H3/e2/N2）
　　char：指定文字揃え（H4）
　　justify：均等割付（H4）
　　left：左寄せ（H3/e2/N2）
　　right：右寄せ（H3/e2/N2）
char=charH4s。位置揃えする文字を指定する。
charoff=nH4s。char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定する。
height=ne4。セルの高さをピクセルで指定する。
valign=valignH3-H4s/e2/N2。セル内データの縦方向の配置を指定する。
　　baseline：ベースライン揃え（H4/e2/N2）
　　bottom：下揃え（H3/e2/N2）
　　center：中央揃え（e2/N2）
　　middle：中央揃え（H3/e2/N2）
　　top：上揃え（H3/e2/N2）
一般属性意味
class=classH4s/e3/N4。クラスを指定する。
dir=dirH4s/e5/N6。文字の表示方向を指定する。
id=idH4s/e3/N4。IDを指定する。
lang=langH4s/e4/N6。言語を指定する。
language=languagee4。スクリプト言語を指定する。
style=styleH4s/e3/N4。スタイルシートを指定する。
title=titleH4s/e4/N6。タイトルを指定する。


Top へ

■ 7 テーブルのセル内表示


align=、valign=、nowrap などでセル内の文字やイメージの配置などを指定できる。 
<table border="1"><tr>
<td>右セルのデータは<br>中央表示の<br>下揃えで表示されます</td>
<td align="center" valign="bottom">このセルは<br>align と valign のテストです。</td>
</tr></table>


右セルのデータは
中央表示の
下揃えで表示されます		
このセルは
align と valign のテストです。		



<table border="1"><tr>
<td>このセルは何も属性していていないので標準設定の自動折り返しとなっています。</td>
<td nowrap>このセルのデータは画面を縮めても改行されません</td>
</tr></table>


このセルは何も属性していていないので標準設定の自動折り返しとなっています。
このセルのデータは画面を縮めても改行されません。



<table border="5"><tr>
<td bgcolor="Yellow">このセルは背景色 Yellow です。</td>
<td bgcolor="Silver" bordercolor="red">このセルのデータは画面を縮めても改行されません</td>
</tr></table>


このセルは背景色 Yellow です。
このセルは背景色 Silver で、枠線の色は red です。
■ 属性一覧
ボーダー関連属性意味
bordercolor=colore2/N4。枠線の色を指定する。
bordercolordark=colore2。立体的な枠線の暗い部分の色を指定する。
bordercolorlight=colore2。立体的な枠線の明るい部分の色を指定する。
背景関連属性意味
background=urle3/N4。背景画像を指定する。<table>, <tr>, <th> でも指定可能です。
bgcolor=colorH4t/e2/N3。背景色を指定する。<table>, <tr>, <th> でも指定可能です。
配置関連属性意味
align=alignH3-H4s/e2/N2。セル内データの横方向の配置を指定する。
　　center：中央表示（H3/e2/N2）
　　char：指定文字揃え（H4）
　　justify：均等割付（H4）
　　left：左寄せ（H3/e2/N2）
　　right：右寄せ（H3/e2/N2）
valign=valignH3-H4s/e2/N2。セル内データの縦方向の配置を指定する。
　　baseline：ベースライン揃え（H4/e2/N2）
　　bottom：下揃え（H3/e2/N2）
　　center：中央揃え（e2/N2）
　　middle：中央揃え（H3/e2/N2）
　　top：上揃え（H3/e2/N2）
height=nH3-H4t/e2/N2。セルの高さを 300 のようなピクセル値、または 50% のようなパーセントで指定する。
width=nH3-H4t/e2/N2。セルの横幅を 300 のようなピクセル値、または 50% のようなパーセントで指定する。
nowrapH3-H4t/e2/N2。セル内データが自動改行されないようにする。
char=charH4s。位置揃えする文字を指定する。
charoff=nH4s。char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定する。
セル連結関連属性意味
colspan=nH3-H4s/e2/N2。セルを n個、横方向に連結する。
rowspan=nH3-H4s/e2/N2。セルを n個、縦方向に連結する。
一般属性意味
class=classH4s/e3/N4。クラスを指定する。
dir=dirH4s/e5/N6。文字の表示方向を指定する。
id=idH4s/e3/N4。IDを指定する。
lang=langH4s/e4/N6。言語を指定する。
language=languagee4。スクリプト言語を指定する。
style=styleH4s/e3/N4。スタイルシートを指定する。
title=titleH4s/e4/N6。タイトルを指定する。
その他属性意味
abbr=abbrH4s。主に <th> で使用する。セルの内容の省略情報を記述する。音声ブラウザがセルの概略を読み上げるのに役立ちます。
axis=axisH4s。多次元配列データのための軸情報などを記述する。
headers=headersH4s。このセルに対応する見出しセルのリストを、id 属性で指定する。
scope=scopeH4s。見出しセルに対して指定する。row はその見出しが列方向に対する見出しであること、col はその見出しが行方向に対する見出しであることを示します。
Top へ

Top へ