表の例

赤と緑の文字が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 TAG SAMPLE


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

<td> <th>タグの属性
width 表全体の幅をピクセル，または％で指定。
height 表全体の高さをピクセル，または％で指定。
align left 左揃え
center中央揃え
right 右揃え
valigntop 上揃え
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>
    本日の日程
    　 １年 ２年 ３年
    １ 平常授業
    ２ 身体測定 テ
    ス
    ト
    ３
    ４
    ５ ＬＨＲ
    ６ クラブ
    戻る