セクション4 表（テーブル）
4-1 テーブルの表示
| 表を作成する基本です。外枠<table>、行<tr>、各セル<td>の順にかこいます。 <table>タグに含む属性 width="**" 表の横幅を指定します。指定しなければ、成り行きで。％での指定もできます。 height="**" 表の高さを指定します。指定しなければ、成り行きで。 border="**" 枠線の太さ。指定しなければ、線は表示されません。 width、height属性は<tr><td>タグにも指定できます。 |
| サンプル 1行×1列 |  |
ソースコード 1行×1列 | ||
|
<table width="200" border="1"> <tr> <td> セル１ 横幅200px </td> </tr> </table> |
テーブルってtrとかtdとか気がつくとよくいなくなってる。 いつ消えたのかなぁ・・・・？
4-2 複数行のテーブル
| 行<tr>を複数つくります。 <tr><td> </td></tr>の繰り返し <table>タグに含む属性 width="**" 表の横幅を指定します。指定しなければ、成り行きで。％での指定もできます。 height="**" 表の高さを指定します。指定しなければ、成り行きで。 border="**" 枠線の太さ。指定しなければ、線は表示されません。 width、height属性は<tr><td>タグにも指定できます。 |
| サンプル 2行×1列 | |
ソースコード 2行×1列 | ||||
|
<table width="200" border="1"> <tr> <td>セル１</td> </tr> <tr> <td>セル２</td> </tr> </table> |
|||||
| サンプル1 2行×1列 | ソースコード1 2行×1列 | |||||
|
<table width="200" border="1"> <tr> <td>セル１</td> </tr> <tr> <td>セル２</td> </tr> <tr> <td>セル３</td> </tr> <tr> <td>セル４</td> </tr> </table> |
4-3 複数列のテーブル
| セル<td>を、<tr> </tr>の中に複数つくります。 <td> </td>の繰り返し <table>タグに含む属性 width="**" 表の横幅を指定します。指定しなければ、成り行きで。％での指定もできます。 height="**" 表の高さを指定します。指定しなければ、成り行きで。 border="**" 枠線の太さ。指定しなければ、線は表示されません。 width、height属性は<tr><td>タグにも指定できます。 |
| サンプル 1行×2列 | |
ソースコード1 1行×2列 | ||||
|
<table width="200" border="1"> <tr> <td>セル１</td> <td>セル２</td> </tr> </table> |
|||||
| サンプル2 1行×4列 | ソースコード2 1行×4列 | |||||
|
<table width="200" border="1"> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> <td>セル４</td> </tr> </table> |
4-4 連結したセル１（横方向）
| 横のセルを連結して、下の行が分割してあるように見せます。 <td colspan="**">は他の行の<td>が分割している場合に記述されます。 <td rowspan="**">は他の列の<td>が分割している場合に記述されます。 |
| サンプル1 | |
ソースコード1 | ||||||||
|
<table border="1"> <tr> <td colspan="2">上の段</td> </tr> <tr> <td>下の段１</td> <td>下の段２</td> </tr> </table> |
|||||||||
| サンプル2 | ソースコード2 | |||||||||
|
<table border="1"> <tr> <td>上の段１</td> <td colspan="3">上の段２</td> </tr> <tr> <td>下の段１</td> <td>下の段２</td> <td>下の段３</td> <td>下の段４</td> </tr> </table> |
|||||||||
4-5 連結したセル２（縦方向）
| 縦のセルを連結して、となりの列が分割してあるように見せます。 |
| サンプル1 | |
ソースコード1 | ||||
|
<table border="1"> <tr> <td rowspan="2">上段１と下段１</td> <td>上段２</td> </tr> <tr> <td>下段２</td> </tr> </table> |
|||||
| サンプル2 | ソースコード2 | |||||
|
<table border="1"> <tr> <td rowspan="2">上段１と下段１</td> <td>上段２</td> </tr> <tr> <td>下段２</td> </tr> </table> |
4-6 余白1（線と文字）
| セルの枠線と文字との間に余白を指定することができます。 <cellpaddeing="**">がそのタグです。 <td>の中に何も入らない場合は を入れておきましょう。 |
| サンプル | |
ソースコード | |||||
|
<table width="200" border="1" cellpadding="10"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
セルとセルの間、枠線と文字の間は、指定しなくてもあいているので、不要であれば
cellpadding="0" と指定します。
少しtableと文字の間に余裕を持たせたいときに便利。
cellpaddingに数値を入れることによって文字が見やすくなって、エンドユーザーに親切です。
少しtableと文字の間に余裕を持たせたいときに便利。
cellpaddingに数値を入れることによって文字が見やすくなって、エンドユーザーに親切です。
| オプション 余白なし | |
ソースコード 余白なしソース | ||||
|
<table width="200" border="1" cellpadding="0"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
4-7 余白2（セルとセル）
| セルとセルの間に余白を指定します。 <cellspacing="**">がそのタグです。 |
| サンプル1 | |
ソースコード1 | ||||
10pxの余白
|
<table width="200" border="1" cellspacing="10"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
セルとセルの間、枠線と文字の間は、指定しなくてもあいているので、不要であれば
cellpadding="0" cellspacing="0" と指定します。
| オプション 余白なし | |
ソースコード 余白なしソース | ||||
|
<table width="200" border="1" cellpadding="0" cellspacing="0"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
4-8 箇横幅の指定
| 表の横幅を指定します。セルに長い文章が入っても、横幅の長さで折り返されます。 |
| オプション | |
ソースコード | |
|
<table width="300" border="1"> <tr> <td>口あけて親待つ鳥や秋の雨</td> </tr> </table> |
セル<td width="**">の横幅も指定することができます。ただし、列ごとでしか出来ません。
そのときテーブルの横幅は指定しないか、セルの合計数になるようにします。
| オプション セルの横幅指定 | |
ソースコード セルの横幅指定 | ||||
|
<table border="1" cellpadding="0" cellspacing="0"> <tr> <td width="200">口あけて</td> <td width="50">親待つ鳥や</td> </tr> <tr> <td width="200">秋の雨</td> <td> </td> </tr> </table> |
4-9 外枠の太さと色
| 表の枠線の太さを指定します。table border="0"にすればレイアウトに使うことができます。 bordercolorは色を変えたいときに使用します。 |
| オプション 1 | |
ソースコード 1 | |
|
<table border="1" bordercolor="#FF6600"> <tr> <td>口あけて親待つ鳥や秋の雨</td> </tr> </table> |
||
| サンプル 2 | ソースコード 2 | ||
|
<table border="0"> <tr> <td>口あけて親待つ鳥や秋の雨</td> </tr> </table> |
少し太い線で指定すると、立体的に影がつくような感じで表現されます。
内側は外枠の線の太さではなく、セルとセルの間隔が線になります。
| オプション 枠線10ｐｘ | |
ソースコード 枠線10ｐｘ | ||||
|
<table border="10" cellpadding="0" cellspacing="2"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
4-10 セルの文字の表示位置
| セルの中で文字の表示位置をしていしたいとき<td>に含める<tr>にも指定できます。 |
| 横位置 align="example" | 縦位置 valign="example" | ||
| 左 | align="left"初期設定 | 上 | valign="top" |
| 中央 | align="center" | 中央 | valign="middle"初期設定 |
| 右 | align="right" | 下 | valign="bottom" |
| サンプル1 横位置 | |
ソースコード1 横位置 | |||
|
<table width="300" border="1"> <tr> <td align="left">左</td> </tr> <tr> <td align="center">中央</td> </tr> <tr> <td align="right">右</td> </tr> </table> |
||||
| サンプル2 縦位置 | ソースコード2 縦位置 | ||||
|
<table width="300" height="50" border="1"> <tr> <td valign="top">上</td> <td valign="middle">中央</td> <td valign="bottom">下</td> </tr> </table> |
| オプション 縦位置ベースライン | |
ソースコード 縦位置ベースライン | ||||
画像が字よりも大きいときなどに<td valign="top">では隣がずれる
|
<table height="50" border="1"> <tr> <td valign="baseline"> <img src="images/baseline.gif" alt="蛙" width="18" height="18" />草の葉に</td> <td valign="baseline">かくれんぼする蛙かな</td> </tr> </table> |
草の葉に4-11 表の見出し
| 表を作る時の一行目を見出しにするときに<th>で定義します。 太字でセンタリングされます。 |
| サンプル 1 | |
ソースコード 1 | ||||||||||||
|
<table width="280" border="1" cellpadding="2" cellspacing="0"> <tr> <th> </th> <th width="60">長い</th> <th width="60">跳ねる</th> <th width="60">丸まる</th> </tr> <tr> <th>動物</th> <td>へび</td> <td>かえる</td> <td>はりねずみ</td> </tr> <tr> <th>虫</th> <td>ミミズ</td> <td>バッタ</td> <td>団子虫</td> </tr> </table> |
見出しは縦方向か横方向のどちらかに使っておいたほうが、表としては見やすく親切です。
4-12 表の背景
| 表の背景色bgcolorを指定<table>タグに指定することによってテーブル全体のセルの色を変えます。 |
| サンプル | |
ソースコード | ||||
| <table width="200" border="1" bgcolor="#0099FF"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> |
テーブルの入れ子にして枠線などを変更させると、さまざまな表ができます。
| サンプル 1 | |
ソースコード 1 | |||
| <table border="0" bgcolor="#0099FF"> <tr> <td> <table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#0099FF" bgcolor="#FFFFFF"> <tr> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> |
|||||
| オプション2 | ソースコード2 | ||||
| <table border="1" bordercolor="#999999" bgcolor="#CCFF66"> <tr> <td> <table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666" bgcolor="#FFFFCC"> <tr> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> |
表組みを作るときなどに便利です。
4-13 セルの背景
| セルの背景色を指定<td>タグに指定することによって各セルの色を変えます。 <tr>タグに指定すれば行単位で変更できます。 |
| サンプル | |
ソースコード | ||||||
|
<table width="200" border="1"> <tr> <td bgcolor="#FF6600">セルに指定</td> <td bgcolor="#FFCC00">セルに指定</td> <td bgcolor="#FF9966">セルに指定</td> </tr> <tr bgcolor="#66FF66"> <td>行に指定</td> <td>しています</td> <td bgcolor="#FFCC00">行に色指定されているがセルにも指定した</td> </tr> </table> |
テーブルの入れ子にして枠線などを変更させると、さまざまな表ができます。
| サンプル 1 | |
ソースコード 1 | |||||
| <table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFCCCC"> </td> <td bgcolor="#FFCCCC"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> |
|||||||
| オプション2 | ソースコード2 | ||||||
| <table border="0" bordercolor="#999999" bgcolor="#CCFF66"> <tr> <td> <table width="200" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC"> <tr> <td bgcolor="#FFFF66"> </td> <td> </td> </tr> <tr> <td bgcolor="#FFFF66"> </td> <td> </td> </tr> </table> </td> </tr> </table> |
4-14 折り返しの禁止
| セル内でテキストが折り返されるのを禁止します。 セルの横幅が指定されていても、このタグが優先されます。 |
| サンプル | |
ソースコード | ||||
nowrap未使用
|
<table width="200" border="1"> <tr> <td nowrap="nowrap">セルにはいる文章が長いと、</td> <td>セル幅に合わせて改行されますしかし、おりかえしたくないときはこのタグを使用します</td> </tr> </table> |
このように、テーブル幅も無効になってしまうので、気をつけましょう。