超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Mozilla Color AccessUp Links SiteMap
ページ
テキスト
スクロール
ライン
イメージ
リンク
リスト
テーブル
フレーム
ボックス
フィルタ
a〜h
i〜z

 テーブルを作る
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 テーブルに枠線をつける
<table border>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 外枠線の幅を指定する
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

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

12
34

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

12
34

 テーブルにタイトルをつける
<table border>
<caption>title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

title
12
34

 タイトルの位置を指定する
<table border>
<caption align="top">title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

title
12
34

<table border>
<caption align="bottom">title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

title
12
34

 見出しセルを指定する
<th>で指定した見出しセルは、太字でセンタリングされます。

<table border>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

123
456
789

<table border>
<tr><th>1</th><td>2</td><td>3</td></tr>
<tr><th>4</th><td>5</td><td>6</td></tr>
<tr><th>7</th><td>8</td><td>9</td></tr>
</table>

123
456
789

 セルとセルの間隔を指定する
<table border cellspacing="0">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

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

12
34

<table border cellspacing="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border cellspacing="10">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 セルとセルの中の文章との間隔を指定する
<table border cellpadding="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border cellpadding="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border cellpadding="10">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 テーブルの大きさを指定する
<table border width="200" height="100">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border width="100" height="200">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 セルの大きさを指定する
<table border>
<tr><td width="100" height="50">1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td width="50" height="100">4</td></tr>
</table>

12
34

 見出しセルの大きさを指定する
<table border>
<tr><th width="100" height="50">1</th><th>2</th><th>3</th></tr>
<tr><td>4</td><td>5</td>td>6</td></tr>
<tr><td>7</td><td>8</td>td>9</td></tr>
</table>

123
456
789

 列の中にある文章の位置を指定する
<table border width="150" height="150">
<tr align="left" valign="top"><td>1</td><td>2</td><td>3</td></tr>
<tr align="center" valign="middle"><td>4</td><td>5</td>td>6</td></tr>
<tr align="right" valign="bottom"><td>7</td><td>8</td>td>9</td></tr>
</table>

123
456
789

 セルの中にある文章の位置を指定する
<table border width="100" height="100">
<tr><td>1</td><td align="left" valign="top">2</td></tr>
<tr><td align="center" valign="middle">3</td><td align="right" valign="bottom">4</td></tr>
</table>

12
34

 見出しセルの中にある文章の位置を指定する
<table border width="150" height="150">
<tr><th align="left" valign="top">1</th><th align="center" valign="middle">2</th><th align="right" valign="bottom">3</th></tr>
<tr><td>4</td><td>5</td>td>6</td></tr>
<tr><td>7</td><td>8</td>td>9</td></tr>
</table>

123
456
789

 テーブルの背景色を指定する
<table border bgcolor="purple">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

 セルの背景色を指定する
<table border>
<tr><td bgcolor="#ffff00">1</td><td bgcolor="#00ff00">2</td></tr>
<tr><td bgcolor="#ff00ff">3</td><td bgcolor="#ff0000">4</td></tr>
</table>

12
34

背景色の応用で、テーブルに影をつけることができます。

<table cellspacing="0" cellpadding="0" width="50">
<tr>
<td width="5" height="5" bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0"></td>
<td width="5"></td>
</tr>
<tr>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0">1</td>
<td bgcolor="#fed0e0">2</td>
<td bgcolor="#cccccc"></td>
</tr>
<tr>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0">3</td>
<td bgcolor="#fed0e0">4</td>
<td bgcolor="#cccccc"></td>
</tr>
<tr>
<td height="5"></td>
<td bgcolor="#cccccc"></td>
<td bgcolor="#cccccc"></td>
<td bgcolor="#cccccc"></td>
</tr>
</table>

12
34

 テーブルの枠線の色を指定する
<table border bordercolor="#0000ff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

<table border="5" bordercolor="green">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

<table cellspacing="0" border="10" bordercolor="pink">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

 テーブルの枠線を立体的にする
bordercolorlightで上と左の線、bordercolordarkで下と右の線の色を指定します。
テーブルの枠線だけじゃなく、セルの枠線の色も指定されます。

<table border="4" bordercolorlight="#66ccff" bordercolordark="#0000ff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

<table cellspacing="0" border="7" bordercolorlight="#ddb7ba" bordercolordark="#880033">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

セルの枠線の色が指定されることを応用すると、こんなこともできます。

<table cellspacing="0" bgcolor="#ffcccc" border bordercolorlight="#000000" bordercolordark="#ffffff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>

12
34

<table cellspacing="0" cellpadding="5" bgcolor="#66ccff" border bordercolorlight="#000000" bordercolordark="#ffffff">
<tr><td>1</td><td >2</td><td >3</td></tr>
<tr><td >4</td><td >5</td><td >6</td></tr>
</table>

123
456

 テーブルの背景画像を指定する
<table border cellpadding="10" cellspacing="5" background="sample/table_image1.gif">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

背景に写真を使うときは、テーブルの大きさに注意しましょう。

<table border cellspacing="10" background="sample/table_image2.jpg" width="250" height="187">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

123
456
789

 セルの横連結
<table border>
<tr><td colspan="2">1</td><td>2</td></tr>
<tr><td>3</td><td>4</td><td>5</td></tr>
</table>

12
345

<table border>
<tr><td colspan="5">1</td></tr>
<tr><td>2</td><td>3</td><td>4</td>td>5</td><td>6</td></tr>
</table>

1
23456

 セルの縦連結
<table border>
<tr><td rowspan="3">1</td><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>

12
3
4

<table border="5" cellspacing="5" width="350" height="150">
<tr>
<td bgcolor="orange" align="left" colspan="2">2つのセルを横連結</td>
<td bgcolor="pink" align="right" rowspan="2">2つのセルを縦連結</td>
</tr>
<tr>
<td bgcolor="yellow" valign="top">上</td>
<td bgcolor="yellowgreen" align="center" valign="middle">真ん中</td>
</tr>
<tr>
<td background="sample/table_image3.gif" colspan="3">3つのセルを横連結</td>
</tr>
</table>

2つのセルを横連結2つのセルを縦連結
真ん中
3つのセルを横連結

 テーブルの背景画像を指定する [スタイルシート]
<table border cellpadding="10" cellspacing="5" style="background-image:url('sample/table_image4.gif');">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

12
34

<table border cellspacing="10" style="background-image:url('sample/table_image5.jpg');" width="250" height="187">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

123
456
789