らくがきはうす

ＴＯＰに戻ります | えほんのぺーじです | やりだしたらとまらない!? | 私が住んでいる所の紹介です | おしゃべりしよっ！ | キリ番をゲットしたらこちら！ | タグのお勉強 | 募集中!! | お友達からのプレゼント♪ | はじめまして!

○ タグ
○ 基本のページ
○ 画像のページ
○ リンクのページ
○ 色見本
○ 文字のページ
*****************
*レイアウトのページ*
*****************
○ 内緒(^^)のページ














＋＋＋レイアウト＋＋＋

☆★☆★☆★ 表を作ってみましょう ☆★☆★☆★

使用するタグはこちら↓

<table> <tr> <td>〜</td> </tr> </table>

<table>と</table>のタグの間に <tr> <td>〜</td> </tr> をいれていきます

<tr>は行を区切るタグです。　 <td>は列（セル）を区切るタグです
＋＋＋縦２つ、横３つの表を作りましょう＋＋＋

Ａ−１ Ｂ−１ Ｃ−１
Ａ−２ Ｂ−２ Ｃ−２

＊わかりやすいように色をつけています


この表のソースはこちら↓
<table border="1" width="300" height="150">
　<tr>
　　<td bgcolor="#00bfff" align="center">
　　　<b>Ａ−１</b>
　　</td>
　　<td bgcolor="#ff69b4" align="center">
　　　<b>Ｂ−１/<b>
　　</td>
　　<td bgcolor="#b8860b" align="center">
　　　<b>Ｃ−１</b>
　　</td>
　</tr>
　<tr>
　　<td bgcolor="#006400" align="center">
　　　<b>Ａ−２</b>
　　</td>
　　<td bgcolor="#ff00ff" align="center">
　　　<b>Ｂ−２</b>
　　</td>
　　<td bgcolor="#ff8c00" align="center">
　　　<b>Ｃ−２</b>
　　</td>
　</tr>
<table>


＋＋＋横方向に結合＋＋＋

次は、Ａ−１とＢ−１のセルを横方向に結合させてみます
Ａ−１＆Ｂ−１ Ｃ−１
Ａ−２ Ｂ−２ Ｃ−２


横方向に結合させたい時は
<td colspan="列の数">

＋＋＋縦方向に結合＋＋＋

次は、Ａ−１とＡ−２のセルを縦方向に結合させてみます
Ａ−１
＆
Ａ−２ 		Ｂ−１ Ｃ−１
Ｂ−２ Ｃ−２

縦方向に結合させたい時は
<td rowspan="行の数">





☆★☆★☆★ では。。。「はべらかす」ためにはどうするか（笑） ☆★☆★☆★

コーナーが全部で６箇所、左右に３箇所づつもってくるとして
縦３つ、横３つの表が基本になります
真中に大きな画像をもってきたいので、２列目は縦方向に結合をします
この２箇所をポイントにタグを組み合わせると↓のようになります

Ａ−１ Ｂ−１ Ｃ−１
Ａ−２ Ｃ−２
Ａ−３ Ｃ−３


<table border="1" width="300" height="150">
<tr>
<td bgcolor="#00bfff" align="center">
　　　<b>Ａ−１</b>
</td>
<td rowspan="3" bgcolor="#ff69b4" align="center">
　　　<b>Ｂ−１/<b>
</td>
<td bgcolor="#b8860b" align="center">
　　　<b>Ｃ−１</b>
</td>
</tr>
<tr>
<td bgcolor="#006400" align="center">
　　　<b>Ａ−２</b>
</td>
<td bgcolor="#ff8c00" align="center">
　　　<b>Ｃ−２</b>
</td>
</tr>
　<tr>
<td bgcolor="#f08080" align="center">
　　　<b>Ａ−３</b>
</td>
<td bgcolor="#ffdab9" align="center">
　　　<b>Ｃ−３</b>
</td>
</tr>
<table>


<td>〜</td>の中に。。。
Ａ−１〜３、Ｃ−１〜３にはそれぞれ、 各コーナーへのリンクをもってきます
Ｂ−１には画像をもってきます




Copyright©2001 RAKUGAKI-HOUSE

since 2001.4.1