IBM ホームページビルダーV11 テーブルのカスタマイズ 2:三笠プライベートHP

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"）を表示してテーブルを表現しています。

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">
<TBODY>
<TR>
<TD bgcolor="#000099"><B><FONT color="#ffffff">Topics</FONT></B></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" bgcolor="#0000ff">
<TBODY>
<TR>
<TD height="2" bgcolor="White"></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" width="150">
<TBODY>
<TR>
<TD height="60" bgcolor="White" width="50%" valign="top" align="left">
<TABLE border="0" width="99%" cellspacing="1" bgcolor="#000099">
<TBODY>
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD bgcolor="White" width="50%" valign="top" align="right">
<TABLE border="0" width="99%" cellpadding="0" cellspacing="1" bgcolor="#000099">
<TBODY>
<TR>
<TD bgcolor="White" height="60"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</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="183" bgcolor="#4aa5ff">
<TR>
<TD background="ibm/tdra1.png" height="24"><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>

IBM Homepage Builder メインページへ戻ります

　スポンサーリンクと他のページの紹介

ホーム　|　フリーソフト　l　特集ページ　l　リンク　l　サイトマップ　l　更新履歴

利用規約及びリンクについて　|　プライバシーポリシー　|　メール送信フォーム