KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/4th/table の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2010/4th/table へ行く。

TITLE:表をつくる
*表をつくる [#k3d2a489]

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

#pre(novervatim){{
COLOR(red):<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>
  ...
COLOR(red):</table>
}}

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

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

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

#ref(Lecture/JouhouC2007/4th/table/table_el.png,nolink,table要素のイメージ);

#pre(novervatim){{
COLOR(red):<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>
COLOR(red):</table>
}}


**表の外枠の幅を指定する [#ha0844d3]
#pre(novervatim){{
COLOR(red):<table border="COLOR(blue):枠の幅COLOR(red):">COLOR(black):...COLOR(red):</table>
}}

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

**表の幅を指定する [#u201167b]
#pre(novervatim){{
COLOR(red):<table width="COLOR(blue):表の幅COLOR(red):">COLOR(black):...COLOR(red):</table>
}}

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

#pre(novervatim){{
COLOR(red):<table border="COLOR(blue):2COLOR(red):" width="COLOR(blue):80%COLOR(red):">COLOR(black):...COLOR(red):</table>
}}


**セルの大きさを指定する [#bd90f65e]
#pre(novervatim){{
COLOR(red):<th width="COLOR(blue):幅COLOR(red):" height="COLOR(blue):高さCOLOR(red):">COLOR(black):...COLOR(red):</th>
COLOR(red):<td width="COLOR(blue):幅COLOR(red):" height="COLOR(blue):高さCOLOR(red):">COLOR(black):...COLOR(red):</td>
}}

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

#pre(novervatim){{
COLOR(red):<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>
COLOR(red):</table>
}}


**セルとセルを連結する [#rb59263a]
#pre(novervatim){{
COLOR(red):<th rowspan="COLOR(blue):縦方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</th>
COLOR(red):<th colspan="COLOR(blue):横方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</th>
COLOR(red):<td rowspan="COLOR(blue):縦方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</td>
COLOR(red):<td colspan="COLOR(blue):横方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</td>
}}

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

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

例えば、次のような表の場合は、
|>|学生|クラス|h
|c2092001|兵庫|A|
|c2092002|加古川|~|
次のように指定します。
#pre(novervatim){{
COLOR(red):<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):c2092001COLOR(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):c2092002COLOR(red):</td><td>COLOR(black):加古川COLOR(red):</td>
  COLOR(red):</tr>
COLOR(red):</table>
}}

**セルとセルの間隔を指定する [#sed9e320]
#pre(novervatim){{
COLOR(red):<table cellspacing="COLOR(blue):間隔COLOR(red):">COLOR(black):...COLOR(red):</table>
}}

''cellspacing''属性を使うと、セルとセルの間隔を設定することができます。
同時に、セルと表の外枠との間隔も設定されます。
表全体の枠線を太くするときにも使えるでしょう。

**セルと内容の間隔を指定する [#rc48edc0]
#pre(novervatim){{
COLOR(red):<table cellpadding="COLOR(blue):間隔COLOR(red):">COLOR(black):...COLOR(red):</table>
}}

''cellpadding''属性を使うと、セルとその内容との間隔を設定することができます。
セルの枠線とセルの中の文字にスペースを作りたいときに、使います。

#pre(novervatim){{
COLOR(red):<table cellspacing="COLOR(blue):4COLOR(red):" cellpadding="COLOR(blue):8COLOR(red):">COLOR(black):...COLOR(red):</table>
}}


&br;
&navi2(Lecture/JouhouC2010/4th,next);進んでください。
----
#navi2(Lecture/JouhouC2010/4th,prev,toc,next)