 
【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
テーブル（表）
タグの簡易テスト（別窓）
| テーブルの基礎 | 行を増やす・減らす
| 列を増やす・減らす
| 行の結合 | 列の結合
| 右・左・中央寄せ
|
| 背景色 | かわいいテーブル
| 背景に画像 | 透けるテーブル
|
背景色
| テーブル <table> に背景色 | 行 <tr> に背景色 | 列（セル） <td>
に背景色 | 応用 |
■<table> に背景色
<table>タグの中に bgcolor="色" を記述します
。表全体に色がつきます。
| 表示 |
記述 |
|
|
<table width="200" border="1"
bgcolor="#FFCC00">
<tr>
<td> </td>
</tr>
</table> |
■<tr> に背景色
<tr>タグの中に bgcolor="色" を記述します
。1行全体（その行内のすべてのセル）に色がつきます。
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr bgcolor="#FFCC00">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> |
■<td> に背景色
<td>タグの中に bgcolor="色" を記述します
。セルにのみ色がつきます。
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td bgcolor="#FFCC00"> </td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFCC00"> </td>
<td bgcolor="#FFFFCC"> </td>
</tr>
</table> |
■応用
| 表示 |
記述 |
|
|
<table width="200" border="1"
bgcolor="#FFCC00">
<tr bgcolor="#FFFFCC">
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#FF9966"> </td>
<td bgcolor="#FFCC99"> </td>
</tr>
</table> |
このページのトップへ
かわいいテーブル
ソース部分をコピー＆ペーストするなどしてご利用ください。
色については「いろいろな色」のページをご覧ください。色の変更等は「タグの簡易テスト」で試されると結果がすぐ分かり便利ですよ☆
<table width="500" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="30" height="30" bgcolor="#99CCCC"> </td>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FF9999"> </td>
<td height="30" width="320"> </td>
<td width="30" height="30" bgcolor="#99CCCC"> </td>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FF9999"> </td>
</tr>
<tr>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FFFFCC"> </td>
<td width="30" height="30"> </td>
<td height="30" width="320">ここに文章など</td>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FFFFCC"> </td>
<td width="30" height="30"> </td>
</tr>
<tr>
<td width="30" height="30" bgcolor="#FFCC99"> </td>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FFCCCC"> </td>
<td height="30" width="320"> </td>
<td width="30" height="30" bgcolor="#FFCC99"> </td>
<td width="30" height="30"> </td>
<td width="30" height="30" bgcolor="#FFCCCC"> </td>
</tr>
</table> |
背景に画像
| テーブル <table> の背景に画像 | 列（セル） <td> の背景に画像 | 応用 |
■<table> の背景に画像
<table>タグの中に background="画像
GIFやJPG" を記述します 。指定した画像が表全体の背景に繰り返されます。
| 表示 |
記述 |
|
|
<table width="200" border="1"
background="rose.gif">
<tr>
<td> </td>
</tr>
</table> |
■<td>の背景に画像
<td>タグの中に background="画像（GIFやJPG）"
を記述します 。記述したセル<td>にのみ指定した画像が繰り返されます。
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td background="rose-red.gif"> </td>
<td> </td>
<td background="rose-brown.gif"> </td>
<td background="rose-gray.gif"> </td>
</tr>
</table> |
※1行全体（その行内のすべてのセル）に指定したい時は同じ画像をその行内のすべての <td> に記述してください。
■応用
| 表示 |
記述 |
|
|
<table width="200" height="120"
border="1" background="dot.gif"
>
<tr>
<td background="rose-gray.gif"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td background="rose-brown.gif"> </td>
</tr>
</table> |
背景用のドットは「HP用素材」のページに216色あります。どうぞご利用ください☆
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
