テーブルの背景色と枠線の太さを変える
枠のあるテーブルに背景色をつける
| 基本のタグ（ここはセルの中） |
<table>タグにbgcolor="#色"を追加すると背景色がつけられます。文字だけだと枠が表示されませんが、背景色をつけることによって、枠があったのがわかりますね。
<table bgcolor="#df9b82">
<tr>
<td>基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース<tr>
<td>基本のタグ（ここはセルの中）</td>
</tr>
</table>
| 基本のタグ（ここはセルの中） |
<table>タグにborder="1"を追加すると枠に背景色がつきます。
<table bgcolor="#df9b82" border="1">
<tr>
<td>基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース<tr>
<td>基本のタグ（ここはセルの中）</td>
</tr>
</table>
| 基本のタグ（ここはセルの中） |
<table>ではなく<td bgcolor="#色">にするとセルの中にだけ、背景色がつきます。
<table border="1">
<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
| 基本のタグ（ここはセルの中） |
枠の太さを変えて<table border="5">にすると、ボタンっぽくなります。太さを変えることによって面白い物ができそうです。
<table border="5">
<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
| 基本のタグ（ここはセルの中） |
枠を取って<cellspacing="1" bgcolor="#色">にすると上のようになります。
cellspacing="1" 数字が大きくなると線が太くなります。
テーブルの背景色「青」の中にセルの背景色「オレンジ」があるという感じです。セルの背景色をなしにするとテーブル全体が青くなってしまいます。
<table cellspacing="1" bgcolor="#0000cc">
<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
<tr>
<td bgcolor="#df9b82">基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース
| 基本のタグ（ここはセルの中） |
いろいろ応用してみました。線の太さを変えて、テーブルのサイズを指定しました。
セル内の余白 cellpadding="3" も指定しました。見やすくなります。
<table cellspacing="2" bgcolor="#333333" width="250"
cellpadding="3">
<tr>
<td bgcolor="#df9b82" align="center">基本のタグ（ここはセルの中）</td>
</tr>
</table>
上記のソース<tr>
<td bgcolor="#df9b82" align="center">基本のタグ（ここはセルの中）</td>
</tr>
</table>
まとめ
| <table>〜</table> | テーブルの始まりと終わりを指定 |
| <tr>〜</tr> | 行を指定します。 |
| <td>〜</td> | セル（列）を指定 |
| cellspacing | 表の線の太さを指定 |
| cellpadding | 枠内のマージン（余白）を指定 |
| <tr>〜</tr>は縦、<td>〜</td>は横と覚えるとコピーで増やしたり、減らしたりする時にとても楽です。 | |
かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル
★skip ページtop
