表を作成する基本です。外枠<table>、行<tr>、各セル<td>の順にかこいます。 <table>タグに含む属性 width="**" 表の横幅を指定します。指定しなければ、成り行きで。%での指定もできます。 height="**" 表の高さを指定します。指定しなければ、成り行きで。 border="**" 枠線の太さ。指定しなければ、線は表示されません。 width、height属性は<tr><td>タグにも指定できます。 |
サンプル 1行×1列 | ソースコード 1行×1列 | |||
|
<table width="200" border="1"> <tr> <td> セル1 横幅200px </td> </tr> </table> |
行<tr>を複数つくります。 <tr><td> </td></tr>の繰り返し <table>タグに含む属性 width="**" 表の横幅を指定します。指定しなければ、成り行きで。%での指定もできます。 height="**" 表の高さを指定します。指定しなければ、成り行きで。 border="**" 枠線の太さ。指定しなければ、線は表示されません。 width、height属性は<tr><td>タグにも指定できます。 |
サンプル 2行×1列 | ソースコード 2行×1列 | |||||
|
<table width="200" border="1"> <tr> <td>セル1</td> </tr> <tr> <td>セル2</td> </tr> </table> |
|||||
サンプル1 2行×1列 | ソースコード1 2行×1列 | |||||
|
<table width="200" border="1"> <tr> <td>セル1</td> </tr> <tr> <td>セル2</td> </tr> <tr> <td>セル3</td> </tr> <tr> <td>セル4</td> </tr> </table> |
セル<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>セル1</td> <td>セル2</td> </tr> </table> |
|||||
サンプル2 1行×4列 | ソースコード2 1行×4列 | |||||
|
<table width="200" border="1"> <tr> <td>セル1</td> <td>セル2</td> <td>セル3</td> <td>セル4</td> </tr> </table> |
横のセルを連結して、下の行が分割してあるように見せます。 <td colspan="**">は他の行の<td>が分割している場合に記述されます。 <td rowspan="**">は他の列の<td>が分割している場合に記述されます。 |
サンプル1 | ソースコード1 | |||||||||
|
<table border="1"> <tr> <td colspan="2">上の段</td> </tr> <tr> <td>下の段1</td> <td>下の段2</td> </tr> </table> |
|||||||||
サンプル2 | ソースコード2 | |||||||||
|
<table border="1"> <tr> <td>上の段1</td> <td colspan="3">上の段2</td> </tr> <tr> <td>下の段1</td> <td>下の段2</td> <td>下の段3</td> <td>下の段4</td> </tr> </table> |
縦のセルを連結して、となりの列が分割してあるように見せます。 |
サンプル1 | ソースコード1 | |||||
|
<table border="1"> <tr> <td rowspan="2">上段1と下段1</td> <td>上段2</td> </tr> <tr> <td>下段2</td> </tr> </table> |
|||||
サンプル2 | ソースコード2 | |||||
|
<table border="1"> <tr> <td rowspan="2">上段1と下段1</td> <td>上段2</td> </tr> <tr> <td>下段2</td> </tr> </table> |
セルの枠線と文字との間に余白を指定することができます。 <cellpaddeing="**">がそのタグです。 <td>の中に何も入らない場合は を入れておきましょう。 |
サンプル | ソースコード | ||||||
|
<table width="200" border="1" cellpadding="10"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
オプション 余白なし | ソースコード 余白なしソース | |||||
|
<table width="200" border="1" cellpadding="0"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
セルとセルの間に余白を指定します。 <cellspacing="**">がそのタグです。 |
サンプル1 | ソースコード1 | |||||
10pxの余白
|
<table width="200" border="1" cellspacing="10"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
オプション 余白なし | ソースコード 余白なしソース | |||||
|
<table width="200" border="1" cellpadding="0" cellspacing="0"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
表の横幅を指定します。セルに長い文章が入っても、横幅の長さで折り返されます。 |
オプション | ソースコード | ||
|
<table width="300" border="1"> <tr> <td>口あけて親待つ鳥や秋の雨</td> </tr> </table> |
オプション セルの横幅指定 | ソースコード セルの横幅指定 | |||||
|
<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> |
表の枠線の太さを指定します。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> |
オプション 枠線10px | ソースコード 枠線10px | |||||
|
<table border="10" cellpadding="0" cellspacing="2"> <tr> <td>口あけて</td> <td>親待つ鳥や</td> </tr> <tr> <td>秋の雨</td> <td> </td> </tr> </table> |
セルの中で文字の表示位置をしていしたいとき<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> |
表を作る時の一行目を見出しにするときに<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> |
表の背景色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> |
セルの背景色を指定<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> |
セル内でテキストが折り返されるのを禁止します。 セルの横幅が指定されていても、このタグが優先されます。 |
サンプル | ソースコード | |||||
nowrap未使用
|
<table width="200" border="1"> <tr> <td nowrap="nowrap">セルにはいる文章が長いと、</td> <td>セル幅に合わせて改行されますしかし、おりかえしたくないときはこのタグを使用します</td> </tr> </table> |
©2006 WEB DESIGN STUDIO Powered by VISUAL LITERACY |