テーブルの基本　cellspacingとsellpadding

　HTMLタグのページ　　セルの指定　cellspacingとcellpadding

テーブルは単に表を作るだけでなくページの構成にとても重要なものなので、是非覚えましょう。

テーブルの基本　

セルの幅を変える <table width="100" height="100" border="2" cellspacing="10">

tableのタグにcellspacing="●●" を追加すると、表全体の枠線の太さ（セルの幅）を指定できます

タグ

ブラウザ表示　　　左からそれぞれ　cellspacing="10","6","2","0"のテーブルです。

*　cellspacingを使用する場合、border="0"にしてしまうと外線の太さが表示されませんが、中に入る文字との間隔は指定されています。

例　　　　border="0" cellspacing="10"のテーブルを作る

ブラウザ表示「左側のテーブル」　　（解りやすいようにテーブルの中の背景に水色を入れました）

*　左のテーブルは外側の線も枠が見えませんが、文字はテーブルの一番外側から離れている枠の幅があることがわかります。
空いている（スペース）幅がcellspacingで指定した幅です。

ブラウザ表示

あああああああああああ

border="0"をborder="2"に変えるとこんな感じになります⇒

あああああああああああ

ちなみに・・・　　border="0" cellspacing="0"のテーブルを作ると・・・

ブラウザ表示「左側のテーブル」

*　左側のテーブルの文字はテーブルの外側の枠にくっついているのがわかります。

　ああああああああああああああ

border="0"をbordre="2"に変えるとこんな感じになります⇒

あああああああああああ

☆　border とcellspacinngの区別がよくわかりませ～～ん；；・・・って思います？

ではもう一度おさらい。

これが、外線太さの指示のみのテーブルです

　これが外線の太さと外枠の幅を指定したテーブルです

<table width="100" height="100" border="6">
<tr>
<td>これが、外線の指示のみのテーブルです
</td>
</tr>
</table>

<table width="100" height="100" border="6" cellspacing="6">
<tr>
<td>　これが外線の太さと外枠の太さを指定したテーブルです
</td>
</tr>
</table>

bordreはテーブルの一番外側の線のサイズの指定

cellspacingはテーブルの枠の幅のサイズの指定
（額縁の幅って感じ）

セル内のマージンを変える　<table width="100" height="100" border="2" cellpadding="4">

マージンとはセルの枠から文字までの距離（余白）のことです。
これを指定することで、枠線に文字がぴったりと隣接して見にくくなることを防げます。　

<table width="100" height="100" border="2" cellpadding="6">
<tr>
<td>ココに文章を入れていきます。　</td>
</tr>
</table>

ブラウザ表示　 cellpadding="0"

ココに文章を入れていきます。

ブラウザ表示　cellpadding="6"

ココに文章を入れていきます。

ブラウザ表示　 cellpadding="15"

ココに文章を入れていきます。

*　左右上下のマージンが変わっているのがわかるでしょうか?

*　cellspacingdとの違いも理解できますでしょうか?
cellspacing　も　cellpaddingも　border="0"　にしてしまうと一見、見分けが付かなくなりますね。

組み合わせて表を作る　

　 borderと、 cellspacingと、 cellpaddingを組み合わせてテーブルを作ります。

　タグ

<table width="100" height="100" border="2" cellspacing="10" cellpadding=4"> <tr>
<td>ココに文章などが入ります</td>
</tr></table>

ブラウザ表示

ココに文章などが入ります