|
サンプルページ
|
|
|
|
サンプルページのソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep ７
</font><br><br>
<table width="200" border="1"
cellpadding="5" cellspacing="3" bordercolor="#FF0000"
bgcolor="#FF0000">
<tr bgcolor="#FFFFFF">
<td>
<div align="center">ＡＡＡＡＡ</div>
</td>
<td>
<div align="center">ＢＢＢＢＢ</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<div align="center">ＣＣＣＣＣ</div>
</td>
<td>
<div align="center">ＤＤＤＤＤ</div>
</td>
</tr>
</table>
</div>
</body>
</html>
|
|
ソースの説明
|
| <table
width="200" border="1" cellpadding="5"
cellspacing="3" bordercolor="#FF0000" bgcolor="#FF0000"> |
| テーブル幅２００/テーブル線幅１/テーブル内余白５/テーブルセル間隔３/テーブル線・背景色「あか」 |
| <tr
bgcolor="#FFFFFF"> </tr> |
| テーブルセル１行背景色「しろ」 行数分<tr>
</tr>があります。 |
| <td> </td> |
| セル１つ（マス目１つ） セルの数分<td> </td>があります。 |
| <div
align="center">ＡＡＡＡＡ</div> |
| ＡＡＡＡＡを中央揃え |
|
|
サンプルページ２
|
|
|
|
サンプルページ２のソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep ７-2</font><br>
<br>
<table width="321" border="0"
height="127" cellpadding="0" cellspacing="0">
<tr>
<td height="30" width="92"
bgcolor="#6600FF">
<div align="center"><font color="#FFFFFF">ＡＡＡ</font></div>
</td>
<td height="30" width="146"
bgcolor="#33FFFF">
<div align="center">ＢＢＢ</div>
</td>
</tr>
<tr>
<td height="72" width="92"
bgcolor="#FF0000" valign="bottom">
<div align="center"><font color="#FFFFFF">ＣＣＣ</font></div>
</td>
<td height="72" width="146"
bgcolor="#CCFFCC" valign="top">
<div align="center">ＤＤＤ</div>
</td>
</tr>
<tr bgcolor="#FFCC00">
<td height="32" colspan="2">
<div align="center">ＥＥＥ</div>
</td>
</tr>
</table>
</div>
</body>
</html>
|
|
ソースの説明
|
| <td
height="30" width="92" bgcolor="#6600FF"><div
align="center"><font color="#FFFFFF">ＡＡＡ</font></div></td> |
|
「AAA」のあるセルの高さ３０/幅９２/背景色「あお」/「AAA」の文字色「しろ」中央揃え
|
| <td
height="72" width="92" bgcolor="#FF0000"
valign="bottom"><div align="center"><font
color="#FFFFFF">ＣＣＣ</font></div></td> |
「CCC」のあるセルの高さ７２/幅９２/背景色「あか」/「CCC」の文字色「しろ」中央揃え
valign="bottom"はセル中の高さの位置 [bottom]=下 [middle]=中 [top]=上 |
| <tr
bgcolor="#FFCC00"><td height="32"
colspan="2"><div
align="center">ＥＥＥ</div></td> |
| colspan="2"は横セル２つ分を１つに結合して使うことです。 |
|
|
サンプルページ３
|
|
|
|
サンプルページ３のソース
|
<html>
<head>
<title>サンプルページ</title>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><font size="7" color="#0000FF">サンプルページStep ７-3</font><br>
<br>
<table width="321" border="0"
height="127" cellpadding="0" cellspacing="0">
<tr>
<td height="64" width="92"
bgcolor="#6600FF">
<div align="center"><font color="#FFFFFF">ＡＡＡ</font></div>
</td>
<td rowspan="2" height="102"
bgcolor="#33FFFF">
<div align="center">ＢＢＢ</div>
</td>
</tr>
<tr>
<td height="44" width="92"
bgcolor="#FF0000">
<div align="center"><font color="#FFFFFF">ＣＣＣ</font></div>
</td>
</tr>
<tr bgcolor="#FFCC00">
<td height="32" colspan="2">
<div align="center">ＤＤＤ</div>
</td>
</tr>
</table>
</div>
</body>
</html>
|
|
ソースの説明
|
| <td
rowspan="2" height="102"
bgcolor="#33FFFF"><div align="center">ＢＢＢ</div></td> |
|
rowspan="2"は縦セル２つ分を１つに結合して使うことです。
|
|
