【レイアウト】　表の中に画像を入れる

表の中に画像を入れて、ＷＥＢサイトを制作すると、見た目の収まり具合をよく見せることが出来ます。

　例えば、この画像をそのまま入れると、このように、文字と画像のバランスが悪くなってしまいます。
しかし、これを表を使ってレイアウトしてあげると・・・

こういった具合に、文字と画像のバランスを考えて配置してあげられるので、表を上手く利用して、画像を配置してあげると良いわけです。

ちなみに、このように枠を消してあげることもできるので、表の枠が要らなければ、消してあげると良いです。 表の枠は、<TABLE border="1">という「表のためのＨＴＭＬ構文」の border="1"の部分を消してあげるか（<TABLE>だけにする）、各ＨＰ制作ソフトの「枠を非表示にする」というコマンドで非表示に出来ます。

表の中の画像に文字を書けるようにする

画像の中に文字を書けるようにするには、以下のような手順でできます。

�@　表のＨＴＭＬ構文を以下のように変更します。
<TABLE border="1"><TBODY><TR>
<TD>←を↓のように変更
<TD background="○○ファイル名○○.gif（←ファイル形式）" width="（画像サイズ）" height="（画像サイズ）">
</TD></TR></TBODY></TABLE>

変更後の表は↓のようになります。
見た目には全然変わりません。

�A　文字を打ち込みます
<TD background="○○ファイル名○○.gif（←ファイル形式）" width="（画像サイズ）" height="（画像サイズ）"></TD>
先ほどは、↑のＨＴＭＬ構文に変更しましたので、</TD>の前に

お誕生日おめでとう<BR>お誕生日のプレゼントは<BR>花束を贈ります。<BR>
・・・と、文字を打ち込んでいきます。

さらに文字色やサイズをアレンジしてみても面白いかもしれません。
<B><FONT color="#FFFFFF" size="-1">お誕生日おめでとう</FONT></B><BR>
<FONT size="-2" color="#FFFFFF">お誕生日のプレゼントは<BR>
花束を贈ります。</FONT>

レスポンシブWEBデザインとテーブル

PCでもタブレット端末でもスマホでも見れるWEBサイトやブログデザインのことを、レスポンシブ（デザイン）と言います。

通常、PCや大型のタブレット端末でテーブルを使ったページを見ると、普通に見ることが出来ます。
しかし、同じページをスマートフォンで見ると横が切れて見えなくなってしまったり、横スクロールしないと見れなくなったりすることがあります。

ですので、レスポンシブのサイトやブログを作る場合は、極力テーブルは使用せず、レイアウトコンテナの<div>を使ったデザインにする方が無難です。
（使用するCSS（スタイル）は、float:left;　や　display:inline-block;　など）