Lecture/InfoDesignB2005/4th/table のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
Lecture/InfoDesignB2005/4th/table へ行く。
- 1 (2005-10-14 (金) 09:47:50)
- 2 (2007-02-24 (土) 07:05:44)
- 3 (2007-02-24 (土) 07:10:26)

表をつくる

表（テーブル）を作るには、 table要素、tr要素、th要素、td要素を使います。

pre> <table>

 COLOR(red):<tr>
   COLOR(red):<th>COLOR(black):...COLOR(red):</th><th>COLOR(black):...COLOR(red):</th>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):...COLOR(red):</td><td>COLOR(black):...COLOR(red):</td>
 COLOR(red):</tr>
 ...

</table>

/pre>

HTMLでは、表全体をtable要素で示します。 table要素の中は、行ごとに表現します。 tr要素は行を示します。

各行には、表のセル（表の中のひとつの項目）をtd要素で示します。必要な数だけ、td要素を使用します。

表の見出しになる項目は、th要素を使います。 th要素の内容は、太字で中央揃えで表示されます。

pre> <table>

 COLOR(red):<tr>
   COLOR(red):<th>COLOR(black):見出し1COLOR(red):</th><th>COLOR(black):見出し2COLOR(red):</th><th>COLOR(black):見出し3COLOR(red):</th>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):データ1COLOR(red):</td><td>COLOR(black):データ2COLOR(red):</td><td>COLOR(black):データ3COLOR(red):</td>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):データ4COLOR(red):</td><td>COLOR(black):データ5COLOR(red):</td><td>COLOR(black):データ6COLOR(red):</td>
 COLOR(red):</tr>

</table>

/pre>

▲ ▼

表の外枠の幅を指定する

pre> <table border="枠の幅">...</table>

/pre>

table要素に、 border属性を設定すると、表の外枠の幅を設定できます。幅に0を設定すると、枠は表示されません。

▲ ▼

表の幅を指定する

pre> <table width="表の幅">...</table>

/pre>

table要素に、 width属性を設定すると表の幅が設定できます。ピクセル値（画面を構成する点の数）やパーセンテージ（%）で指定します。ウィンドウの大きさに合わせて表の幅を動かしたい場合は、パーセンテージを使うとよいでしょう。

pre> <table border="2" width="80%">...</table>

/pre>

▲ ▼

セルの大きさを指定する

pre> <th width="幅" height="高さ">...</th> <td width="幅" height="高さ">...</td>

/pre>

セルの幅を設定するには、th要素やtd要素にwidth属性を設定します。また、セルの高さを設定するには、height属性を設定します。どちらもピクセル値を指定します。設定すると、そのセルだけでなく、幅の場合は同じ列のすべてのセルに、高さの場合は同じ行のすべてのセルに設定が影響します。

pre> <table border="2">

 COLOR(red):<tr>
   COLOR(red):<th width="COLOR(blue):50COLOR(red):" height="COLOR(blue):20COLOR(red):">COLOR(black):見出し1COLOR(red):</th><th>COLOR(black):見出し2COLOR(red):</th><th>COLOR(black):見出し3COLOR(red):</th>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):データ1COLOR(red):</td><td>COLOR(black):データ2COLOR(red):</td><td>COLOR(black):データ3COLOR(red):</td>
 COLOR(red):</tr>

</table>

/pre>

▲ ▼

セルとセルを連結する

pre> <th rowspan="縦方向の連結数">...</th> <th colspan="横方向の連結数">...</th> <td rowspan="縦方向の連結数">...</td> <td colspan="横方向の連結数">...</td>

/pre>

rowspan属性やcolspan属性を指定すると、そのセルから指定した数だけのセルが連結され、ひとつの大きなセルとしてまとめられます。

連結される位置にある、tdやth要素は入力しません。

例えば、次のような表の場合は、

学生		クラス
G2031001	兵庫	A
G2031002	加古川	A

次のように指定します。

pre> <table>

 COLOR(red):<tr>
   COLOR(red):<th colspan="COLOR(blue):2COLOR(red):">COLOR(black):学生COLOR(red):</th><th>COLOR(black):クラスCOLOR(red):</th>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):G2031001COLOR(red):</td><td>COLOR(black):兵庫COLOR(red):</td><td rowspan="COLOR(blue):2COLOR(red):">COLOR(black):ACOLOR(red):</td>
 COLOR(red):</tr>
 COLOR(red):<tr>
   COLOR(red):<td>COLOR(black):G2031002COLOR(red):</td><td>COLOR(black):加古川COLOR(red):</td>
 COLOR(red):</tr>

</table>

/pre>

▲ ▼