HOME l BACK

IBM Homepage Builder　V11　テーブルのカスタマイズ 2　スタイルシートは未使用

写真のイメージアップには、縁取り効果とフォトフレームを使用出来ます又写真を好きなサイズに指定して抽入出来ます。


* HTML へ画像の抽入は、ページの表面に画像を抽入した場合は、そのままのサイズにて表示され、 BODY 又はテーブルの背景画に指定の場合は、重複されて表示されます。筆者はペイントはあまり得意でないので？テーブルを綺麗に装飾出来ませんが参考にされて下さい。

テーブル 内容 横幅値は、 A B C D 縦幅値は、A E I M とヘッド（先頭）部分のみに入力！それ以外の部分に異なる数値が入っていた場合は、バッティング（競合）して正常にテーブルは表示されません。
A B C D
E
I
M




テーブルの外枠 （ border="0"） を未表示にして罫線 （cellspacing="1"） を表示してテーブルを表現しています。
<TABLE border="0" cellpadding="5" cellspacing="1" width="150" bgcolor="#000040">
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TABLE>




Topics
<TABLE border="0" cellpadding="5" cellspacing="1" width="150" bgcolor="#000040">

<TR>
<TD bgcolor="#000099"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>

</TABLE>



Topics

↑

Topics

スペース

縦に3つのテーブルを使用し、真ん中に空白のテーブルにてスペースを作成している。
<TABLE border="0" cellpadding="5" cellspacing="0" width="150">
<TR>
<TD bgcolor="#000099"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD height="2"></TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="5" cellspacing="1" bgcolor="#000099" width="150">
<TR>
<TD width="150" height="60" bgcolor="White"></TD>
</TR>
</TABLE>




Topics

↑

Topics

スペース

<TABLE border="0" cellpadding="5" cellspacing="0" width="150">
<TR>
<TD bgcolor="#000099"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD height="2"></TD>
</TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" width="150">
<TR>
<TD height="60" bgcolor="White" width="50%" valign="top">
<TABLE border="0" width="100%" cellspacing="1" bgcolor="#000040">
<TR>
<TD width="49%" bgcolor="White" height="60"></TD>
</TR>
</TABLE>
</TD>
<TD bgcolor="White" valign="top" width="2"></TD>
<TD bgcolor="White" width="49%" valign="top">
<TABLE border="0" width="100%" cellpadding="3" cellspacing="1" bgcolor="#000000">
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>



Topics

↑

Topics

青枠は未表示！

<TABLE border="0" cellpadding="2" cellspacing="1" width="150" bgcolor="#000040">
<TR>
<TD bgcolor="White" height="60" valign="top">
<TABLE border="0" width="100%" bgcolor="#000040">
<TR>
<TD><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
</TABLE>
<TABLE border="0" width="100%">
<TR>
<TD height="50"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>



Topics
「Topic」 部分の背景画像に 　画像を指定。

<TABLE border="0" cellpadding="5" cellspacing="1" width="150" bgcolor="#000040">
<TR>
<TD background="ibm/boder1.gif"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TABLE>

　素材を作成したツール
彩彩畑
素材作成ツール。グラデェーションを使用して簡単にシンプルな素材を作成出来ます。



Topics
「Topic」 部分のテーブルの背景画像に　　画像を指定。

<TABLE border="0" cellpadding="5" cellspacing="1" width="150" bgcolor="#4aa5ff">
<TR>
<TD background="ibm/tdra1.png" height="17"><B><FONT color="#000000">Topics</FONT></B></TD>
</TR>
<TR>
<TD bgcolor="White" height="71"></TD>
</TR>
</TABLE>

Topics

↑

Topics


青枠は未表示に！
「Topic」 部分のテーブルの背景画像に　　画像を指定。

<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD background="ibm/tdra3.png" align="center" height="25" width="183"><FONT color="#c0c0c0"><B><FONT color="#000000">Topics</FONT></B></FONT></TD>
</TR>
<TR>
<TD bgcolor="White" height="71" valign="top" width="183">
<TABLE border="0" width="100%" cellpadding="3" cellspacing="1" bgcolor="#ff0000">
<TR>
<TD height="64" bgcolor="White"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

　素材を作成したツール
AquaMaker
クリスタルなアクアタイプのボタンを簡単作成。ウィンドウズのペイントで必要な部分を切り取って使用。



Topics
「Topic」 部分のテーブルの背景画像に　　画像を指定。

<TABLE border="0" cellpadding="5" cellspacing="1" width="150" bgcolor="#000040">
<TR>
<TD background="ibm/vq3.png"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TABLE>