表の例

赤と緑の文字がHTML，続いて表示結果です。

　例１. シンプルな表

各行が <tr> ～ </tr>, 各セルデータの前後に<td> ～ </td> を置きます。
字下げして見やすく書くとよいでしょう。


<table border>
  <tr>
    <th>県名</th>
    <th>県庁所在地</th>
  </tr>
  <tr>
    <td>愛知県</td>
    <td>名古屋市</td>
  </tr>
  <tr>
    <td>鹿児島県</td>
    <td>鹿児島市</td>
  </tr>
</table>

県名	県庁所在地
愛知県	名古屋市
鹿児島県	鹿児島市

border オプションを省略すると，罫線が表示されません。
文字や図を並べるのに使えます。


<table>
  <tr>
    <td>CPU</td>
    <td>Pentium3 500MHz</td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>128kB</td>
  </tr>
  <tr>
    <td>HDD</td>
    <td>10GB</td>
  </tr>
</table>

CPU	Pentium3 500MHz
Memory	128kB
HDD	10GB

　例２. <table> の属性を使って表を飾る

<table> の属性を使って額縁のように枠を作ります。

<table> タグの属性
border 枠の影の太さ
cellspacing 枠線の太さ
cellpadding 枠と文字の間隔
width 表全体の幅をピクセル，または％で表します。
height 表全体の高さをピクセル，または％で表します。
align left, center, right で表全体の配置を指定します。

<td> の属性 bgcolor=でセルの背景色，align=で文字の配置が指定できます。


<table border=7 cellspacing=5 cellpadding=3 width=500 align=center>
  <tr>
    <td bgcolor=pink align=center>
      <font color=darkblue size=6>TABLE TAG SAMPLE</font>
    </td>
  </tr>
</table>

<table> タグの属性
border	枠の影の太さ
cellspacing	枠線の太さ
cellpadding	枠と文字の間隔
width	表全体の幅をピクセル，または％で表します。
height	表全体の高さをピクセル，または％で表します。
align	left, center, right で表全体の配置を指定します。

TABLE TAG SAMPLE

　例３. <td> <th> セルの属性設定

<td> <th>タグの属性
width	表全体の幅をピクセル，または％で指定。
height	表全体の高さをピクセル，または％で指定。
align	left	左揃え
	center	中央揃え
	right	右揃え
valign	top	上揃え
	middle	中央揃え
	bottom	下揃え
bgcolor	セルの背景色設定
colspan	結合するセルの列数
rowspan	結合するセルの行数
nowrap	セル内改行禁止

width= でセルの幅，height= でセルの高さをピクセル単位で設定します。

同じ列で幅を指定した場合，一番大きいサイズに設定されます。

同じ行で高さを指定した場合も，一番大きいサイズに揃います。


<table border>
  <tr>
    <td width=150 height=50>幅=150，高さ=50</td>
    <td width=250>幅=250，高さ=50</td>
  </tr>
  <tr>
    <td height=80>幅=150，高さ=80</td>
    <td>幅=250，高さ=80</td>
  </tr>
</table>

幅=150，高さ=50	幅=250，高さ=50
幅=150，高さ=80	幅=250，高さ=80

align= でセル内の文字列の配置を設定します。

left（左揃え），center（中央揃え），right（右揃え）

<table border>
  <tr>
    <td>指定なし</td>
    <td width=150>データ</td>
  </tr>
  <tr>
    <td>左揃え</td>
    <td align=left>データ</td>
  </tr>
  <tr>
    <td>中央揃え</td>
    <td align=center>データ&</td>
  </tr>
  <tr>
    <td>右揃え</td>
    <td align=right>データ</td>
  </tr>
</table>

指定なし	データ
左揃え	データ
中央揃え	データ
右揃え	データ

valign= で垂直方向の文字の配列を指定します。

top（上揃え），middle（中央揃え），bottom（下揃え）

<table border>
  <tr>
    <td height=40>指定なし</td>
    <td>上揃え　</td>
    <td>中央揃え</td>
    <td>下揃え　</td>
  </tr>
  <tr>
    <td height=40>データ</td>
    <td valign=top>データ</td>
    <td valign=middle>データ</td>
    <td valign=bottom>データ</td>
  </tr>
</table>

指定なし	上揃え	中央揃え	下揃え
データ	データ	データ	データ

bgcolor= でセルの背景色を設定します。

色名はこちらを参照してください。

<table border>
  <tr align=center>
    <td width=100 height=50 bgcolor=pink>- PINK -</td>
    <td width=100 bgcolor=yellow>- YELLOW -</td>
    <td width=100 bgcolor=cyan>- CYAN -</td>
  </tr>
</table>

- PINK -

- YELLOW -

- CYAN -

・colspan= で結合するセルの列数を指定します。

<table width=200 height=80 border>
  <tr>
    <th colspan=3>教科</th>
  </tr>
  <tr>
    <td>国語</td>
    <td>数学</td>
    <td>英語</td>
  </tr>
</table>

教科
国語	数学	英語

・rowspan= で結合するセルの行数を指定します。

<table width=150 height=120 border>
  <tr>
    <th rowspan=3>教科</th>
    <td>国語</td>
  </tr>
  <tr>
    <td>数学</td>
  </tr>
  <tr>
    <td>英語</td>
  </tr>
</table>

教科	国語
	数学
	英語

・nowrap を設定すると，セル内のテキストの折り返しを禁止できます。

<table border width=600>
  <tr>
    <td>普通，セル内のテキストはこんなふうに自動的に折り返して表示されます。</td>
    <td nowrap>nowrap を設定すると，セル内のテキストの折り返しを禁止できます。</td>
  </tr>
</table>

普通，セル内のテキストはこんなふうに自動的に折り返して表示されます。

nowrap を設定すると，セル内のテキストの折り返しを禁止できます。

　例４. ちょっと複雑な例

rowspan，colspan を組み合わせた例です。
<th> は各行，列の見出しで，デフォルトで字体がボールド，配置は中央揃えになります。


<table border=3 cellpadding=7 cellspacing=2>
  <caption align=top>本日の日程</caption>
  <tr>
    <th width=30>　</th>
    <th>１年</th>
    <th>２年</th>
    <th>３年</th>
  </tr>
  <tr>
    <th>１</th>
    <td colspan=3 align=center align=center>平常授業</td>
  </tr>
  <tr>
    <th>２</th>
    <td rowspan=3 colspan=2>身体測定</td>
    <td rowspan=3 align=center>テ<br>ス<br>ト</td>
  </tr>
  <tr>
    <th>３</th>
  </tr>
  <tr>
    <th>４</th>
  </tr>
  <tr>
    <th>５</th>
    <td colspan=3 align=center>ＬＨＲ</td>
  </tr>
  <tr>
    <th>６</th>
    <td colspan=3 align=center>クラブ</td>
  </tr>
</table>

本日の日程
	１年	３年
１	平常授業
２	身体測定	テスト
３
４
５	ＬＨＲ
６	クラブ

戻る