テーブルの基本 cellspacingとsellpadding
HTMLタグのページ
セルの指定 cellspacingと cellpadding
テーブルの基本
セルの幅を変える <table width="100" height="100" border="2" cellspacing="10" >
tableのタグにcellspacing="●●" を追加すると、表全体の枠線の太さ（セルの幅）を指定できます
タグ
<table width="100" height="100" border="2" cellspacing="10"
>
<tr>
<td> </td>
</tr>
</table>
ブラウザ表示 左からそれぞれ cellspacing="10","6","2","0"のテーブルです。
10
6
2
0
* cellspacingを使用する場合、border="0"にしてしまうと外線の太さが表示されませんが、中に入る文字との間隔は指定されています。
例 border="0" cellspacing="10"のテーブルを作る
<table width="100" height="100" border="0" cellspacing="10"
>
<tr>
<td> </td>
</tr>
</table>
<tr>
<td> </td>
</tr>
</table>
ブラウザ表示「左側のテーブル」 （解りやすいようにテーブルの中の背景に水色を入れました）
* 左のテーブルは外側の線も枠が見えませんが、文字はテーブルの一番外側から離れている枠の幅があることがわかります。
空いている（スペース）幅がcellspacingで指定した幅です。
ブラウザ表示
あああああああああああ
border="0"をborder="2"に変えるとこんな感じになります⇒
あああああああああああ
ちなみに・・・ border="0" cellspacing="0"のテーブルを作ると・・・
<table width="100" height="100" border="0" cellspacing="0"
>
<tr>
<td> </td>
</tr>
</table>
<tr>
<td> </td>
</tr>
</table>
ブラウザ表示「左側のテーブル」
* 左側のテーブルの文字はテーブルの外側の枠にくっついているのがわかります。
ああああああああああああああ
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" >
マージンとはセルの枠から文字までの距離（余白）のことです。
これを指定することで、枠線に文字がぴったりと隣接して見にくくなることを防げます。
ブラウザ表示 cellpadding="0"
ブラウザ表示 cellpadding="6"
ブラウザ表示 cellpadding="15"
* 左右上下のマージンが変わっているのがわかるでしょうか?
* cellspacingdとの違いも理解できますでしょうか?
cellspacing も cellpaddingも border="0" にしてしまうと一見、見分けが付かなくなりますね。
これを指定することで、枠線に文字がぴったりと隣接して見にくくなることを防げます。
<table width="100" height="100" border="2" cellpadding="6"
>
<tr>
<td>ココに文章を入れていきます。 </td>
</tr>
</table>
<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>
<td>ココに文章などが入ります</td>
</tr></table>
ブラウザ表示
ココに文章などが入ります
© Rakuten Group, Inc.
