(2つめはリンク,4つめはイメージファイルがない場合)
参考仕様
- 1行3列
- <table border="1">
<tbody>
<tr>
<td bgcolor="#ff0000" width="50"
height="30"><CENTER>赤色</CENTER></td>
<td bgcolor="#ffff00" width="50"
height="30"><CENTER>黄色</CENTER></td>
<td bgcolor="#0000ff" width="50"
height="30"><CENTER>青色</CENTER></td>
</tr>
</tbody>
</table>
borderで表のフレームの太さ"1"を決定
bgcolorでフレーム内の色を決定
widthとheightでフレーム内の大きさを決定
widthとheightの値はピクセルと%で設定することが可能
ピクセルの場合には数値のみ.%の場合には「%」を数字の後ろに付ける
- 3行1列
- <table border="5">
<tbody>
<tr>
<td width="100" height="20"
bgcolor="#ff0000"><CENTER>赤色</CENTER></td>
</tr>
<tr>
<td width="100" height="20"
bgcolor="#ffff00"><CENTER>黄色</CENTER></td>
</tr>
<tr>
<td width="100" height="20"
bgcolor="#0000ff"><CENTER>青色</CENTER></td>
</tr>
</tbody>
</table>
borderで表のフレームの太さ"5"を決定
bgcolorでフレーム内の色を決定
widthとheightでフレーム内の大きさを決定
- 3行3列
- <table border="1">
<tbody>
<tr>
<td width="50" height="30"
bgcolor="#ff0000"><CENTER>赤色</CENTER></td>
<td width="50" height="30"
bgcolor="#ffff00"><CENTER>黄色</CENTER></td>
<td width="50" height="30"
bgcolor="#0000ff"><CENTER>青色</CENTER></td>
</tr>
<tr>
<td width="50" height="40"
bgcolor="#ffffff"><CENTER>白色</CENTER></td>
<td width="50" height="40"
bgcolor="#666666"><CENTER>グレー</CENTER></td>
<td width="50" height="40"
bgcolor="#000000"><CENTER>黒色</CENTER></td>
</tr>
<tr>
<td width="50" height="50"
bgcolor="#00ff00"><CENTER>黄緑色</CENTER></td>
<td width="50" height="50"
bgcolor="#ff8000"><CENTER>橙色</CENTER></td>
<td width="50" height="50"
bgcolor="#ffffff" background="/images/cube.gif"><CENTER>画像</CENTER></td>
</tr>
</tbody>
</table>
backgroundで表に画像の貼り付け
赤色 |
黄色 |
青色 |
白色 |
グレー |
黒色 |
黄緑色 |
橙色 |
画像 |
- 表のフレームの消去
border="1"を消去
- 表の水平連結
- <table>
<tbody>
<tr>
<td width="50" height="30"
bgcolor="#ff0000" colspan="3"></td>
</tr>
<tr>
<td width="50" height="40"
bgcolor="#ffffff"></td>
<td width="50" height="40"
bgcolor="#666666"></td>
<td width="50" height="40"
bgcolor="#000000"></td>
</tr>
<tr>
<td width="50" height="50"
bgcolor="#00ff00"></td>
<td width="50" height="50"
bgcolor="#ff8000"></td>
<td width="50" height="50"
bgcolor="#ffffff" background="images/cube.gif"></td>
</tr>
</tbody>
</table>
colspan="3"を使用して、フレームを連結
- 表の垂直連結
- <table bgcolor="#00ffff">
<tbody>
<tr>
<td width="50" height="30"
bgcolor="#ff0000" rowspan="3"></td>
<td width="50" height="30"
bgcolor="#ffff00"></td>
<td width="50" height="30"
bgcolor="#0000ff"></td>
</tr>
<tr>
<td width="50" height="40"
bgcolor="#666666"></td>
<td width="50" height="40"
bgcolor="#000000"></td>
</tr>
<tr>
<td width="50" height="50"
bgcolor="#ff8000"></td>
<td width="50" height="50"
bgcolor="#ffffff" background="images/cube.gif"></td>
</tr>
</tbody>
</table>
colspan="3"を使用して、フレームを連結
表のフレーム部に着色
- 上下方向にフレーム分割
- Index: ファイル名・・・TopPage1.html
- <html>
<head>
<title>FrameView</title>
</head>
<frameset rows="20%,80%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</html>
- Frame: ファイル名・・・Frame.html
- <html>
<head>
<title>Frame</title>
</head>
<body>
<P align="center">Frame<BR>
<BR>
Main-<A href="Main-A.html" target="Main">A</A>
Main-<A href="Main-B.html" target="Main">B</A>
Main-<A href="Main-C.html" target="Main">C</A>
<BR>
<BR>
<A href="../html.html" target="_parent">Return</A></P>
</body>
</html>
- Main: ファイル名・・・Main-A.html,Main-B.html.Main-C.html
- <html>
<head>
<title>MAIN-A</title>
</head>
<body bgcolor="#ff0000">
<P align="center"><BR>Main-A</P>
</body>
</html>
AをBやCに置き換えてそれぞれのファイルを作成
ここをクリックすると、フレームを使用したWebSiteが見れます。
- 左右方向にフレーム分割
- Index: ファイル名・・・TopPage2.html
- <html>
<head>
<title>FrameView2</title>
</head>
<frameset cols="15%,85%">
<frame src="Frame.html" name="Frame">
<frame src="Main-A.html" name="Main">
</frameset>
</html>
- 以下、Frame,Mainは上記のものと同じ
ここをクリックすると、フレームを使用したWebSiteが見れます。
色の設定
- 色の設定には色名もしくは16進表記を使用します.
- 赤 ⇒ 色名:red, 16進表記:"#ff0000"
- 青 ⇒ 色名:blue, 16進表記:"#0000ff"
- 黄色 ⇒ 色名:yellow, 16進表記:"#ffff00"
- グレー ⇒ 色名:gray, 16進表記:"#bebebe"
- 緑 ⇒ 色名:green, 16進表記:"#00ff00"