KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/table のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/5th/table へ行く。
  • 1 (2004-10-28 (木) 09:55:02)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

表をつくる

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

<table>
  <tr>
    <th>...</th><th>...</th>
  </tr>
  <tr>
    <td>...</td><td>...</td>
  </tr>
  ...
</table>
</pre>

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

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

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

#ref(table_el.png,nolink,table要素のイメージ);

#pre(novervatim){{
<table>
  <tr>
    <th>見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
    <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>
</pre>


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

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

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

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

#pre(novervatim){{
<table border="2" width="80%">...</table>
</pre>


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

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

#pre(novervatim){{
<table border="2">
  <tr>
    <th width="50" height="20">見出し1</th><th>見出し2</th><th>見出し3</th>
  </tr>
  <tr>
    <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
</table>
</pre>


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

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

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

例えば、次のような表の場合は、
|>|学生|クラス|h
|G2031001|兵庫|A|
|G2031002|加古川|~|
次のように指定します。
#pre(novervatim){{
<table>
  <tr>
    <th colspan="2">学生</th><th>クラス</th>
  </tr>
  <tr>
    <td>G2031001</td><td>兵庫</td><td rowspan="2">A</td>
  </tr>
  <tr>
    <td>G2031002</td><td>加古川</td>
  </tr>
</table>
</pre>

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

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

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

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

#pre(novervatim){{
<table cellspacing="4" cellpadding="8">...</table>
</pre>




次へ進んでください。
----
#navi2(Lecture/InfoDesignB2004/5th,prev,toc,next)