【1】の構造が判ったと思うので外側のケイを変えてみましょう。変えるのは一番最初の↓のタグ部分だけです。
<table width="80%" border="0" cellspacing="0" cellpadding="4" bgcolor="#ccccff" align="center" >まずはこの指定を「style」の形に変更します。(同じ命令文を同色にしてます)
<table style=" width:80%; border-width:0; margin:0px; padding:4px; background-color:#ccccff; text-align:center; ">
| ■■■ | ★★★ ここにタイトルを入れる ★★★ | ■■■ |
見た目は同じです。
もし外枠の色を変えるなら「bgcolor="#ccccff"」か「background-color:#ccccff;」を、
枠の太さを変えるなら「cellpadding="4"」か「padding:4px;」を書き換えます。
| ■■■ | ★★★ ここにタイトルを入れる ★★★ | ■■■ |
外枠の色を「#ffcccc」に、枠の太さを「1px」にしてみました。
さて、せっかくスタイル形式にしたのだから枠を二重線や水玉にしたいなぁと思いませんか?二重線や水玉などは罫線の指定になるので緑の部分の書き換えをします。
<table style="width:80%; border-width:0; margin:0px;padding:4px;background-color:#ffcccc;text-align:center;">↓
<table style="width:80%; border:double 5px #000066; margin:0px;padding:4px;background-color:#ffcccc;text-align:center;">【border】にスタイル・太さ・色の順に指定を入れます。
| ■■■ | ★★★ ここにタイトルを入れる ★★★ | ■■■ |
縁がじゃまなので取ってしまいましょう。
<table style="width:80%;border:double 5px #000066;margin:0px; padding:4px;background-color:#ffcccc; text-align:center;">↓
<table style="width:80%;border:double 5px #000066;margin:0px;padding:0px;text-align:center;">
| ■■■ | ★★★ ここにタイトルを入れる ★★★ | ■■■ |
中を塗りつぶす場合は2つ目ののテーブルの色指定を外すか同色の指定をします。
<table style="width:80%;border:double 5px #000066;margin:0px;padding:0px; background-color:#ccccff; text-align:center;">と
<table width="100%" border="0" cellspacing="0" cellpadding="8" bgcolor="#ccccff">もしくは
<table width="100%" border="0" cellspacing="0" cellpadding="8">
| ■■■ | ★★★ ここにタイトルを入れる ★★★ | ■■■ |


