 
【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
テーブル（表）
タグの簡易テスト（別窓）
| テーブルの基礎 | 行を増やす・減らす
| 列を増やす・減らす
| 行の結合 | 列の結合
| 右・左・中央寄せ
|
| 背景色 | かわいいテーブル
| 背景に画像 | 透けるテーブル
|
行の結合
行を結合するには、<td> タグの中に colspan="結合したセルの数"を記述します。
<td> </td> は結合のため省略する部分（記述しない部分）です。
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td colspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
|
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> |
このページのトップへ
列の結合
列を結合するには、<td> タグの中に rowspan="結合したセルの数"を記述します。
<td> </td> は結合のため省略する部分（記述しない部分）です。
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
|
| 表示 |
記述 |
|
|
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td bgcolor="#FFCC66"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#99CC99"> </td>
<td> </td>
</tr>
</table>
|
※わかりやすく色をつけています。背景色部分＝同色のタグ部分です。
このページのトップへ
|
右・左・中央寄せ
| <table>を寄せる | <td>を寄せる |
■<table>を寄せる
中央に寄せる場合は <table> タグの中に align="center"と記述します。
これは本当によく使いますよ。便利です。
<table width="250" align="center">
<tr>
<td> </td>
</tr>
</table> |
右に寄せる場合は <table> タグの中に align="right"と記述します。
<table width="250" align="right">
<tr>
<td> </td>
</tr>
</table> |
左に寄せる場合は <table> タグの中に align="right"と記述します。
これを記述することにより、文字がまわりこんでくれるようになります。
<table width="250" align="left">
<tr>
<td> </td>
</tr>
</table> |
|
■<td>を寄せる
<td>（セル）の中に入っているものを寄せます。
横寄せ
それぞれの <td> タグの中に↓
左寄せは align="left"
、中央寄せは align="center"
、右寄せは align="right"
と記述してください。
| <td align="left"> |
<td align="center"> |
<td align="right"> |
縦寄せ
それぞれの <td> タグの中に↓
上寄せは valign="top"
、中央寄せは valign="middle""
、下寄せは valign="bottom"
と記述してください。
| <td valign="top"> |
<td valign="middle"> |
<td valign="bottom"> |
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
