テーブル(表組ページ)を作ろう

テーブル表示の基本タグ

<table>
<tr>
<td>★</td>
</tr>
</table>

★=表示させる文字
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<table>
<tr>
<td>項目1</td>
<td>項目2</td>
</tr>
</table>

</body>
</html>

表の一行を表すには列の数(横方向の項目数)
だけ<td>〜</td>を繰り返し

更にそれを<tr>〜</tr>で囲みます

<tr>〜</tr>のセットを行の数(縦方向の項目数)

だけ繰り返して表を作成します







テーブル外枠の表示

<table border="★">
★外枠の太さ(ピクセルで指定)
<table>タグのborder属性でテーブル外枠の太さを指定できます

テーブル外枠の表示形式の指定

<table border="★" frame="☆">だけの機能です
★=外枠の太さ(ピクセルで指定)
☆=キーワード
使用する時は外枠の太さを指定するborder属性と一緒に指定してください
キーワードhsides外枠の上下だけを表示
キーワードvsides外枠の左右だけを表示
キーワードabove外枠の上だけを表示
キーワードbelow外枠の下だけを表示
キーワードlhs外枠の左だけを表示
キーワードrhs外枠の右だけを表示
表示例(キーワードはlhs)
123
×

テーブルの外枠色の指定

<table bordercolorlight="★" bordercolordark="★">
HTMLタグであそぼう
http://www4.osk.3web.ne.jp/~kitayan/
★=カラーコード又はカラーネームで指定
!bordercolor属性はインターネットエクスプローラ、ネットスケープいずれの
ブラウザでも対応していますがbordercolorlight,bordercolordark属性
インターネットエキスプローラのみの対応となります

テーブル中枠の表示形式

<table rules="★">
★=表示形式[none,rows,cols,all]
a b
c d
a b
c d
a b
c d
a b
c d
none rows cols all

テーブル全体の横幅の指定

<table width="★%">
★=ページ全体に対するテーブルの幅(ピクセル数腕も指定できます)

テーブルの背景に画像ファイルを表示する

<table background="★">
★=表示する画像ファイル名

テーブルの背景色の指定

<table bgcolor="★">
★=カラーコード又はカラーネームで指定

テーブル内での見出しの指定

<th>★</th>
★=見出しにする文字

複数のセルにまたがるセルを作る

<td colspan="★">横にまたがるセルを作ります
<td rowspan="★">縦にまたがるセルを作ります
★=またがるセルの数
<td>タグのcolspan,rowspan属性で縦横にまたがるセルを作る事が出来ます

テーブル作成例

<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<table border="3" bgcolor="#87ceeb" width="85%">
<tr>
<TD rowspan="4">スクロール</TD>
<TD align="center">文字のスクロール</TD>
<TD>ソース</TD>
<TD>サンプル</TD></tr>
<tr><TD>ステータスバーでのスクロール</TD>
<td>ソース</td>
<td>サンプル</td></tr>
<tr><TD>ステータスバーでのスクロール2</TD>
<td>ソース</td>
<td>サンプル</td></tr>
<tr><TD>スタッフロール</TD>
<td>ソース</td>
<td>サンプル</td>
</tr>
</table>

</body>
</html>
上のソースの表示例
スクロール 文字のスクロール ソース サンプル
ステータスバーでのスクロール ソース サンプル
ステータスバーでのスクロール2 ソース サンプル
スタッフロール ソース サンプル

セルサイズの指定

<td width="★" height="☆">
★=セルの横幅
☆=セルの高さ

セル間隔(内枠線の太さ)の指定

<table cellspacing="★" border="☆">
★=セル同士の間隔(罫線の太さ)ピクセル数で指定
☆=外枠の太さ(ピクセルで指定)
使用する時は外枠の太さを指定するborder属性と一緒に指定してください

セル内容と枠線の余白指定

<table cellpadding="★"> border="1">
★=セル内容と枠の間隔、ピクセル数で指定
結果
cellpadding="3"を指定 cellpadding="20"を指定
内容1 内容2 内容3
内容4 内容5 内容6
内容1 内容2 内容3
内容4 内容5 内容6

セル内文字の表示位置の指定

<td align="★">〜</td>
★=横方向の位置 left(左寄せ),center(中央揃え),right(右寄せ)
<td valign="★">〜</td>
★=縦方向の位置 top(上に配置),middle(中央に配置),bottom(下に配置)

セル内文字の改行を禁止する

<td nowrap>〜</td>
セル内での文字の自動改行を無効にします

テーブルに対してテキストの回りこみ位置の指定

<table align="★">
★=画像の表示位置(left,right,center)テキストは画像の反対に回りこみます

テーブルにタイトル(キャプション)を付ける

<caption align="★" valign="☆">■</caption>
★=キャプションの表示位置(左右)(left,right)
☆=キャプションの表示位置(上下)(top,bottom)
■=タイトルの文字
<caption>タグはテーブルタグ内で使用しテーブルにタイトルを表示するのに便利です
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<table border="1" bgcolor="#87ceeb" width="70%">
<caption align="right" valign="top">これがキャプション!</caption>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
<td>項目4</td></tr>
<tr><TD>項目5</td>
<td>項目6</td>
<td>項目7</td>
<td>項目8</td></tr>
</table>
</body>
</html>
上記ソースの結果
これがキャプション!
項目1 項目2 項目3 項目4
項目5 項目6 項目7 項目8
注)上の例はExplorerのみ対応の拡張オプションです
通常は<caption align="★">■</caption>
★=表示位置(上下)(top,bottom)
■=タイトル文字
となります

テーブル背景画像の指定

<table background="★">
★=画像ファイル
内容1 内容2 内容3
内容4 内容5 内容6


テーブル枠線を実線で表示

<table border="1" cellspacing="0" bordercolor="★">
★=枠線色カラーコード又はカラーネームで指定
bordercolor="★"はだけの機能です
内容1 内容2 内容3
内容4 内容5 内容6

セル(列)ごとの一括指定

<colgroup></colgroup>
<col span="★">
で複数列の一括指定(★=列数)
内容1 内容2 内容3 内容5 内容6
内容1 内容2 内容3 内容5 内容6
内容1 内容2 内容3 内容5 内容6

タグ使用例
<table border="1" bordercolor="#808080" cellspacing="0" width="80%">
<colgroup align="center" style="background-color: #FFCC66; font-weight:bold;"></colgroup>
<colgroup width="80px" style="font-size: x-small;"></colgroup>
<col span="3" align="right" style="background-color: #FFFFFF;">

<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容5</td>
<td>内容6</td>
</tr>
以下略
</table>