■ テーブルタグの書き方／使い方
最も基本的なタグ、テーブルタグを使いこなそう！
▼tableタグの使いかた／書き方
テーブルタグは便利なタグです。様々な場面で使いますが一度テーブルを設置したら
その後修正する事も少ないので、意外と忘れやすいタグの一つです。
下でも詳しい説明を追加していますのであわせてご覧下さい。
tableテーブル（テーブル、セル）
<table border="1">
<tr>
<td>①</td>
<td>②</td>
</tr>
<tr>
<td>③</td>
<td>④</td>
</tr>
</table>
<tr></tr>を重ねると縦に、<td></td>を重ねると横にセルが増えていきます。
「まずテーブルを縦何行にするのかを決めて、（各行ごとに）横何列にするかを決める」
という具合に考えると簡単です。
・セルを左右に結合する
<table border="1">
<tr>
<td>①</td>
<td>②</td>
</tr>
<tr>
<td colspan=2>③</td>
</tr>
</table>
<td colspan=n> で、右方向に n 個の項目を結合します。
・セルを上下に結合する
<table border="1">
<tr>
<td>①</td>
<td rowspan=2>②</td>
</tr>
<tr>
<td>③</td>
</tr>
</table>
<td rowspan=n> で、縦方向に n 個の項目を結合します。
（ヒント）tableとセルの標準値
はじめは意識せずに標準値を使ったほうが知識の混乱を防ぎ無難だと思いますが、
知っておいて損は無いと思います。実はサイズを指定しないテーブルとセルはこうなっています。
レイアウトを詳細に操りたい時にこの数値や属性を微調整してください。
| teble |
border（線の幅）：0
cellpadding（セル内の余白）：1
sellspacing（セルの間隔）：2
| td |
align（セル内の横の配置）:left
valign（セル内の縦の配置））：middle
■tabeleタグの用途（tableタグ詳細解説）
テーブルの用途は主に大きく２つに分けられます
・レイアウトデザインの部品として使用する
・データ表やマトリックス表で使用する（tableタグ本来の使い方）
・レイアウト、デザインの部品として使用する
Webデザインでネックになるのがブラウザサイズの変更などに伴うレイアウト崩れです。
これを防ぐ為には第１の枠（外枠）を使います。
まず第１の枠（外枠）予定している<width>幅と<height>高さで固定する。特に<width>幅が重要です（多少大きすぎるくらいがよい）
さらに、複雑なレイアウトを表現する場合は、この第１の枠の中に第２の枠を配置します。
第２の枠内は主に<tr><td>のセルで区切ります。（用途に応じて第３の枠を追加する）
例えば、印刷をするときのページ設定をするような感じです。
※ただし、あまり複雑なテーブル構成、セル構成は読み込みに時間がかかり、見る側にやさしくない事もあります。レイアウトが複雑になってきた場合はＳＴＹＬＥシートの併用も検討してください。
（ＳＴＹＬＥシートリファレンスへ）
・データ表、マトリックス表として使用する
テーブルの使用としては最もスタンダードな方法です。
数値などの比較や推移などの表作成につかったり、項目整理の為の整理表を書くときに使用します。
注意事項）テーブルのサイズ指定とキチンと行い、余力があればセル単位でもサイズ指定をして下さい。
これもレイアウト崩れを防ぐ為です。
・テーブルの文法・書き方
<table>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<tr></tr>を重ねると縦に、<td></td>を重ねると横にセルが増えていきます。
「まずテーブルを縦何行にするのかを決めて、（各行ごとに）横何列にするかを決める」
という具合に考えると簡単です。
・よく使う属性
枠線の太さ：border="ｎ" ｎ：数値
セル内のマージン：cellpadding="ｎ"
セル間隔：cellspacing="ｎ" [spacing：(語間・行間)あき]
幅：width="ｎ"（ｐｘ、％）
上へ：valign="top","middle（規定値）","bottom"
中央へ：align="center（規定値）","left","right"
・一般的な属性まとめ
・枠線関連
border="数値(n:０～)"
bordercolor="色"
・背景を変える
background="ＵＲＬ" 背景画像
bgcolor="色" 背景色
・セル内の配置
align="＠" （＠はcenter：中央寄せ left：左端寄せ right：右端寄せ）
valign="＠" （＠はmiddle：中央寄せ top：上方寄せ bottom：下方寄せ）
cellpadding="数値(n:０～)" 枠線とセルの内容の間の隙間をピクセル単位で指定
cellspacing="数値(n:０～)" 内枠の太さを指定します。0 を指定すると、細い線になる
height="数値(n:０～)又は%" テーブルの高さ指定
width="数値(n:０～)又は%" テーブルの幅指定
・セルの間の隙間を無くす
border=0 cellspacing=0 cellpadding=0
・セルを連結する
<td>を colspan=５ とすると、横方向に５個のセルを連結します。
またrowspan="数値(n:０～)は縦方向に連結します。
・テクニック
・空白セルの処理
空白セルの周りの線は細く表示されてしまうので、以下の方法で回避できる
・全角スペースまたは、改行<br>を入力する
・border=0にする
・テーブルで囲む
複雑なデザインをテーブルタグで実現するには、外にレイアウトテーブルを１つ設けます。
たとえば外テーブルのそれぞれのセルに内テーブルを設置することにより横に複数のテーブルを並べることが可能です。。
・大きいテーブルは分割すること
ブラウザはテーブルを表現する時に、テーブル全体の情報を読み込んでから表示を始めます。
画面いっぱいにテーブルを配置した場合、表示が遅くなり真っ白な画面のまま待たなくては
いけません。
１つの大きなテーブルよりも、半分の大きさのテーブル２つ。４分の１のテーブル４つ。
レイアウト上可能な限り分けるようにしてください。表示速度が上がります。
・セル分割よりもテーブルを入れ子にする
１つの大きなテーブルを配置してセルの分割・結合するよりも、セル内のテーブルを置いたほうが
レイアウト操作が簡単になります。
・縦の区切りを入れる２つの方法
横の水平線は&;lthr>を使用しますが、縦の区切り線はちょっとしたテクニックがあります。
まず区切りとなるセルの中に
（１）「縦横１ピクセルのgif画像」を「height=100%」と指定して置く
（２）「width=1px」としてセルを好きな色で塗りつぶす。