テーブル

テーブル（表）を作成するには <table> を用います。<table>～</table> がひとつのテーブル、<caption>～</caption> が表題、<tr>～</tr> が1行、<th>～</th> がヘッダのマス（カラム）、 <td>～</td> がデータのマス（カラム）に対応します。border=1 は枠線の太さを示します。

【各国の首都】
国名	首都
日本	東京
大韓民国	ソウル
中国	北京

<table border=1>
 <caption>【各国の首都】</caption>
 <tr><th>国名</th><th>首都</th></tr>
 <tr><td>日本</td><td>東京</td></tr>
 <tr><td>大韓民国</td><td>ソウル</td></tr>
 <tr><td>中国</td><td>北京</td></tr>
</table>

■ テーブルの中身を改行しないようにするには

テーブルの中身を改行させないようにするには、<tr>、<th>、<td> などのタグに nowrap 属性を指定します。

<table>
<tr><th nowrap>あああ</th><th>いいい</th><th>ううう</th></tr>
</table>

■ テーブル内のフォントを一度に指定するには

<table>～</table> を、<font>～</font> で囲むことはできません。テーブル内のフォントの大きさや色を一度に指定するには、スタイルシートを用いると便利です。下記の記述を <head>～</head> の間に追記してみてください。

<style type="text/css">
<!--
td, th {
  color: red;
  font-size: 200%;
  font-family: "ＭＳ ゴシック";
}
-->
</style>

■ カラム（セル）を連結（結合）するには

カラムを横や縦に連結するには <td> や <th> に colspan=n や rowspan=n 属性を指定します。n には連結するカラムの数を指定します。

横連結
縦連結	○○
	△△

<table border=1>
 <tr><td colspan=2>横連結</td>             </tr>
 <tr><td rowspan=2>縦連結</td><td>○○</td></tr>
 <tr>                         <td>△△</td></tr>
</table>

■ 空欄の見栄えをよくするには

テーブルの中に <td></td> のような空欄があると、その部分が凹んでくれずに見栄えが悪くなることがあります。この時は、<td><br></td> のように <br> を入れてやると、凹んで表示されるようです。

	○○
○○	○○

→

	○○
○○	○○

■ テーブルの幅や高さを指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の width 属性や height 属性を指定します。または、スタイルシートの width や height を用います。ただし、HTML4.01 の仕様では、<table> タグに height 属性は指定できないので注意してください。

東京都	12,345,678
広島県	987,654

→

東京都	12,345,678
広島県	987,654

■ カラムの内容を右寄せ、左寄せするには

<tr>、<th>、<td> に align 属性を指定することで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。

東京都	12,345,678
広島県	987,654

→

東京都	12,345,678
広島県	987,654

■ カラムの内容を上寄せ、下寄せするには

<tr>、<th>、<td> に valign 属性を指定することで、カラムの内容を上に寄せたり、下に寄せたりすることができます。

これは下寄せです。

これは上寄せです。

■ テーブルの背景色を指定するには

テーブルに背景色を指定するには、<table>、<tr>、<th>、<td> の bgcolor 属性を指定します。スタイルシートの場合は background-color を用います。

■■	●●
□□	◎◎
◇◇	○○

<table border=1 bgcolor="#ffcccc">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

■ テーブルの背景画像を指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の background 属性を指定します。スタイルシートの場合は background-image を用います。

■■	●●
□□	◎◎
◇◇	○○

<table border=1 background="xxx.gif">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

■ テーブルを横に二つ並べるには

テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブル（枠線無し）を設けます。

ああ	ああ
ああ	ああ

ああ	ああ
ああ	ああ

<table>
 <tr>
  <td>
   <table border=1>
    <tr><td>ああ</td><td>ああ</td></tr>
    <tr><td>ああ</td><td>ああ</td></tr>
   </table>
  </td>
  <td>
   <table border=1>
    <tr><td>ああ</td><td>ああ</td></tr>
    <tr><td>ああ</td><td>ああ</td></tr>
   </table>
  </td>
 </tr>
</table>

■ 枠線の色を変えるには

テーブルの枠線の色を変えるには、<table> タグに bordercolor などの属性を指定します。Internet Explorer では、bordercolordark（立体的な枠線の暗い部分）、bordercolorlight（立体的な枠線の明るい部分）の指定も可能です。

<table border=1 bordercolor="#cc0000" bordercolordark="#ffffff">
  :
</table>

■ 枠線をシンプルにするには

■ 枠線をもっと細くするには

テーブルを二重にして背景色を制御することで、細い枠線を書くことができます。IE と Netscape Navigator の両方の見栄えを整えるには、border=0 などの属性を省略しないでください。

ああ	ああ
ああ	ああ

<table border=0 bgcolor="#808080" cellspacing=0 cellpadding=0>
<tr>
<td>
 <table border=0 cellspacing=1 cellpadding=2>
 <tr bgcolor="#ffffff"><td>ああ</td><td>ああ</td></tr>
 <tr bgcolor="#ffffff"><td>ああ</td><td>ああ</td></tr>
 </table>
</td>
</tr>
</table>

Internet Explorer では、bordercolordark 属性を指定する方法もあります。

ああ	ああ
ああ	ああ

<table border=1
       bordercolor="#808080" bordercolordark="#ffffff"
       cellspacing=0 cellpadding=2>
 <tr><td>ああ</td><td>ああ</td></tr>
 <tr><td>ああ</td><td>ああ</td></tr>
</table>

■ テーブルの枠線を点線にするには

テーブルの枠線を点線にするには、border=1 ではなく、スタイルシートで点線の枠線を引きます。

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.dot { border-bottom: 1px dotted gray; border-left: 1px dotted gray; }
.dot th { border-top: 1px dotted gray; border-right: 1px dotted gray; }
.dot td { border-top: 1px dotted gray; border-right: 1px dotted gray; }
-->
</style>
</head>
<body>
<table class="dot" cellspacing=0>
<tr><th>あああ</th><th>あああ</th></tr>
<tr><td>あああ</td><td>あああ</td></tr>
<tr><td>あああ</td><td>あああ</td></tr>
<tr><td>あああ</td><td>あああ</td></tr>
</table>
</body>
</html>

■ 角の丸いテーブルを表示するには

角の丸いテーブルは、下記のように 5種類の画像を用いて実現します。


	本文・・・

<table cellspacing=0 cellpadding=0>
<tr>
 <td><img src="rtbl1.gif" height=20 width=20></td>
 <td><img src="rtbl5.gif" height=20 width=100></td>
 <td><img src="rtbl2.gif" height=20 width=20></td>
</tr>
<tr>
 <td><img src="rtbl5.gif" height=50 width=20></td>
 <td background="rtbl5.gif">本文・・・</td>
 <td><img src="rtbl5.gif" height=50 width=20></td>
</tr>
<tr>
 <td><img src="rtbl3.gif" height=20 width=20></td>
 <td><img src="rtbl5.gif" height=20 width=100></td>
 <td><img src="rtbl4.gif" height=20 width=20></td>
</tr>
</table>