テーブル（表）について
- html テーブル編最近は大分減ってきたようですがレイアウトを組んでしまうのがWebスタンダードでした。最近はCSSが大分増えましたね。元は表組みの為のタグです。
- □ テーブル（表）を作る
＜table ★ ＞〜＜/table＞ 表
＜tr＞〜＜/tr＞ 横一列
＜td＞〜＜/td＞ セル
＜table＞と＜/table＞は、これに挟まれた範囲がテーブル（表）であることを示す基本のタグになります。テーブルを構成する各要素の最初と最後に置きます。枠線を表示する場合はborder属性を指定します（「枠線の幅を指定する」を参照して下さい。）
＜tr＞と＜/tr＞は行を指定するタグで、横一列分のデータの最初と最後に記述します。
セルに入るデータはそれぞれ＜td＞タグと＜/td＞タグの間に記述してください。
例
＜table border="2"＞
＜tr＞＜td＞月曜＜/td＞＜td＞入門クラス＜/td＞＜td＞受付終了＜/td＞＜/tr＞
＜tr＞＜td＞水曜＜/td＞＜td＞基礎クラス＜/td＞＜td＞募集中＜/td＞＜/tr＞
＜tr＞＜td＞金曜＜/td＞＜td＞応用クラス＜/td＞＜td＞今期休講＜/td＞＜/tr＞
＜/table＞
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 応用クラス | 今期休講 |
- □ テーブルの見出しをつける
＜th＞〜＜/th＞
＜th＞タグと＜/th＞タグで行や列の見出しを作成します。見出しとして定義されたテキストは、一般的には太字でセンタリングされて表示されます。
align属性を指定すれば、見出しの表示位置も変更することが出来ます。ただし、align属性は推奨しない属性に指定されているので使用には気を付けましょう。
- □ 枠線の幅を指定する
＜table border="★"＞〜＜/table＞
★・・・枠線の幅（ピクセル）
border属性で枠線の幅を指定します。
1以上の数値をピクセルでしないと枠線は表示されません。また、border="０"を設定したときも枠線は表示されないので気を付けましょう。
例
＜table border="5"＞
＜tr＞＜td＞月曜＜/td＞＜td＞入門クラス＜/td＞＜td＞受付終了＜/td＞＜/tr＞
＜tr＞＜td＞水曜＜/td＞＜td＞応用クラス＜/td＞＜td＞今期休講＜/td＞＜/tr＞
＜/table＞
＜table border="10"＞
＜tr＞＜td＞月曜＜/td＞＜td＞入門クラス＜/td＞＜td＞受付終了＜/td＞＜/tr＞
＜tr＞＜td＞水曜＜/td＞＜td＞基礎クラス＜/td＞＜td＞募集中＜/td＞＜/tr＞
＜tr＞＜td＞金曜＜/td＞＜td＞応用クラス＜/td＞＜td＞今期休講＜/td＞＜/tr＞
＜/table＞
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 応用クラス | 今期休講 |
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 応用クラス | 今期休講 |
- □ テキストに対するテーブルの位置を指定する
＜table align="★"＞〜＜/table＞
★・・・left,right,center
align属性をテーブルを左、右、中央のいずれか配置することが出来ます。
left、またはrightを設定したときは、テーブルに続くテキストがテーブルの横の回り込みます。また、回り込みを解除するには、<br>タグのclear属性を使用しましょう。
デフォルトはalign="left"ですが、この属性が指定されてないとテキストは回り込もませんので気を付けましょう。
- □ テーブルに対する回り込みを解除する
＜br clear="★"＞
★・・・all,left,right
テキストの回り込みを解除して、それ以降のテキストはテーブルの下の行から続けたいときは、<br>タグにclear属性を指定します。
left・・・テーブルが左側にある時（<table align="left">）の回り込みを解除します。
right・・・テーブルの右側にあるとき（<table align="right">）の回り込みを解除します。
all・・・どちらの場合にも有効になります。
と、このうな効果になります。
- □ テーブルとテキストの間隔を指定する
<table vspace="★" hspace="☆" align="●">〜</table>
★・・・縦方向の間隔（ピクセル）
☆・・・横方向の間隔（ピクセル）
●・・・left、right
テキストの回り込みを設定したときの、テーブルと周囲の間隔を指定することができます。
Netscape Navigatorが独自に拡張した属性ですが、Netscape 6で対応しなくなったので気をつけて下さい。
- □ テーブルのサイズを指定する
<table width="★" height="☆">〜</table>
★・・・テーブルの幅（ピクセルまたは％）
☆・・・テーブルの高さ（ピクセル）
width属性でテーブル全体の幅を指定することができます。パーセントで指定するとブラウザのウィンドウサイズに対する割合となり、ブラウザの大きさが変わればテーブルの大きさも変わります。また、ピクセル数で指定すると指定されて大きさで固定されます。
ブラウザによっては<table>タグに対してheight属性を設定することでテーブル全体の高さを指定することもできます（ピクセル指定のみ）。しかし、この方法はHTML4.01では定義されていませんので、テーブルの高さを指定するときは、スタイルシートもしくは<th>タグや<td>タグの属性として定義されているheight属性を利用した方がよいでしょう。
例
<table border="1" width-"350" height="200">
<tr><th>曜日</th><th>クラス&tl;/th><th>状況</th></tr>
<tr><td>月曜</td><td>入門クラス</td><td>受付終了</td></tr>
<tr><td>水曜</td><td>基礎クラス</td><td>募集中</td></tr>
<tr><td>金曜</td><td>入門クラス</td><td>今期休講</td></tr>
</table>
| 曜日 | クラス | 状況 |
|---|
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 入門クラス | 今期休講 |
- □ セルのサイズを指定する
<th width="★" height="☆">〜</th>
<td width="★" height="☆">〜</td>
★・・・セルの横幅（ピクセル）
☆・・・セルの高さ（ピクセル）
<th>タグ、<td>タグにwidth属性やheight属性を指定すると、セルの横幅や高さを指定することが出来ます。
- □ セル内のテキストの位置を指定する
<tr align="★" valign="☆">〜</tr>
<th align="★" valign="☆">〜</th>
<td align="★" valign="☆">〜</td>
★・・・left、center、right
☆・・・top、middle、bottom、baseline
セル内でのデータが表示される位置を指定するには、align属性とvalign属性を使用します。
alignではデータの行揃え（横方向）を指定し、valignでは垂直方向（縦方向）を指定します。
left・・・左揃え
center・・・中央揃え
right・・・右揃え
top・・・上
middle・・・中央
bottom・・・下
baseline・・・横方向のデータベースラインの基準になります。各セル内の1行目のベースラインを揃えます。
デフォルトはalign="left"、valign="middle"です。
- □ セルの間隔やマージンを指定する
<table cellspacing="★" cellpadding="☆">〜</table>★・・・セルの間隔（ピクセル）
☆・・・セル内のマージン（ピクセル）
cellspacingはテーブルの外枠とセル、およびセルとセルの間隔を指定することができます。外見的にはテーブルの各線の太さが変更されたようになります。
また、cellpaddingはセルの枠とセル内の内容と間隔（マージン）を指定することができます。
- □ 枠線の色を指定する
<table border bordercolor="★">〜</table>
<table border bordercolorlight="★" bordercolordark="★">〜</table>
★・・・色指定（#rrggbb）、または色名（colorname）
テーブルの枠線の色を指定するには、<table boder>にbordercolor、bordercolorlight、bordercolordarkの各属性を付けます。
bordercolor属性は、枠線全体の色を一色で指定できます。
bordercolorlight属性とbordercolordark属性を使うと、色を使い分けて立体的な枠線のテーブルを表現することが出来ます。
ただし、Netscapeはbordercolor属性に不完全に対応、bordercolorlight属性とbordercolordark属性には対応していないので注意して下さい。
- □ 外枠の表示方法を指定する
<table frame="★">〜</table>
★・・・void,above,below,hsides,vsides,lhs,rhs,box,border
frame属性で、テーブルの外枠線の表示方法を設定することが出来ます。
void・・・外枠なし（デフォルト）
above・・・上のみ
below・・・下のみ
hsides・・・上下のみ
vsides・・・左右にのみ
lhs・・・左側のみ
rhs・・・右側のみ
box・・・外枠全て
border・・・四辺の縁取り
と、このような値になります。
- □ 内側罫線の表示方法を指定する
<table rules="★">〜</table>
★・・・none,groups,rows,cols,all
rules属性は、セルの間に引かれる罫線の表示方法を設定することが出来ます。
none・・・罫線なし（デフォルト）
groups・・・thead,tfoot,tbody,colgroup,colの境界のみ
rows・・・横の列の境界のみ
cols・・・縦の列の境界のみ
all・・・すべての境界
とこのような値になります。
- □ テーブルの背景色を指定する
<table bgcolor="★">〜</table>
<tr bgcolor="★">〜</th>
<th bgcolor="★">〜</th>
<td bgcolor="★">〜</td>
★・・・色指定（#rrggbb）、または色名（colorname）
bgcolor属性でテーブルの背景色を指定することができます。
<table>タグに指定した場合はそのテーブル全体に、<tr>タグに指定した場合はその横1列（行）に色をつけることができます。
また<th>タグと<td>タグに指定した場合には、そのセルにのみ色が付きます。
例
<table border="2" cellpadding="15" bgcolor="#9966ff">
<tr><th bgcolor="#33ccff">曜日</th><th>クラス</th>状況</th></tr>
<tr bgcolor="#ff9999"><td>月曜</td><td>入門クラス</td><td>受付終了</td></tr>
<tr><td bgcolor="#c0c0c0">水曜</td><td>基礎クラス</td><td>募集中</td></tr></table>
| 曜日 | クラス | 状況 |
|---|
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
- □ テーブルの背景画像を固定する
<table background="★">〜</table>
★・・・画像ファイル名（URL）
background属性でテーブルの背景に画像を貼り込むことが出来ます。しかし、ブラウザによって表示方法が異なるので注意しましょう。
Internet ExplorerとNetscape 6ではテーブル全体を基準に画像を張り込むため、セルの大きさや数には関係なく画像が表示され、画像が小さければタイル状に並べられます。これに対し、Netscape Navigator 4.7以前では各セルごとに画面が表示されます。
またHTML4.01では定義されていない属性です。
- □ セルの背景画像を指定する
<tr background="★">〜</tr>
<th background="★">〜</th>
<td background="★">〜</td>
★・・・画像ファイル名（URL）
<tr>、<th>、<td>タグのbackground属性でセルの背景に画像を貼り込むことが出来ます。
<tr>タグに対して指定すると、その横一列の背景として表示されます。ただしこの指定はNetscape（Navigator）のみに対応です。Internet Explorerには対応していないので気を付けましょう。
<th>タグ、<td>タグに対して指定すると、指定したセルの背景として表示することが出来ます。
いずれの場合にも、画像の大きさがセルよりも小さい時は繰り返してタイル状に並べられます。
またHTML4.01では定義されていない属性です。
- □ セル内の改行を禁止する
<th nowrap>〜</th>
<td nowrap>〜</td>
通常、テーブルの大きさはブラウザが自動毛気に調節し、データを各セルにうまくおさめようとするため、セル内のテキストが長い場合には自動的に改行されてしまいます。
このような自動改行をしないよう設定をするときには<th>、<td>タグにnowrap属性を指定します。
- □ 縦方向にセルを連結する
<th rowspan="★">〜</th>
<td rowspan="★">〜</td>
★・・・連結するセル
<th>、<td>タグにrowspan属性を指定すると、そのセルから指定された数の下方向のセルを連結して一つのセルに表示することが出来ます。
例
<table border="1">
<tr><th>曜日</th><th>クラス</th><th>状況</th>6lt;/th>
<tr><td>月曜</td><td>入門クラス</td><td rowspan="3">募集中</td></tr>
<tr><td>水曜</td><td>基礎クラス</td></tr>
<tr><td>金曜</td><td>応用クラス</td></tr>
</tablr>
| 曜日 | クラス | 状況 |
|---|
| 月曜 | 入門クラス | 募集中 |
| 水曜 | 基礎クラス |
| 金曜 | 応用クラス |
- □ 横方向にセルを連結する
<th colspan="★">〜</th>
<td colspan="★">〜</td>
★・・・連結するセル数
<th>、<td>タグにcolspan属性を指定すると、そのセルから指定された数の右方向のセルを連結して一つのセルに表示することが出来ます。
例
<table border="1">
<tr><th>曜日</th><th>クラス</th><th>状況</th></tr>
<tr><td>月曜</td><td colspan="2">受付終了</td></tr>
<tr><td>水曜</td><td>基礎クラス</td><td>募集中</td></tr>
<tr><td>金曜</td><td colspan="2">受付終了</td></tr>
</table>
| 曜日 | クラス | 状況 |
|---|
| 月曜 | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 受付終了 |
- □ 行をグループ化する
<thead>〜</thead> テーブルのヘッダ
<tfoot>〜</tfoot> テーブルのフッタ部分
<tbody>〜</tbody> テーブルの本体部分
テーブルの横方向の並びに（行）をヘッダ、フッタ、本体という３つの論理的な構造にわけ、それぞれをまとめてグループ化することが出来きます。
このようにグループ化することで、現在はそのような機能を持つブラウザはありませんが、ヘッダとフッタ部分を固定したまま本体部分だけをスクロールしたり、長いテーブルを印刷する場合、各ページにヘッダとフッタにつけることなどが出来るようになります。<tbody>部分は１つに限らず複数配置で来ますが、いずれの場合にも必ず<thead><tfoot><tbody>の順番で記述しましょう。なぜなら、これは本体部分がすべて表示される前に、フッタを表示できるようにするためです。
また、<tfoot>タグは<tbody>タグより先に記述しますが、<tbody>タグの部分の下に表示されます。
- □ 列をグループ化する
<colgroup ★>〜</colgroup>
★・・・span="グループ化する列数"（デフォルトは１）
width="列幅"（ピクセル、％）
align="left"、"center"、"right"
valign="top"、"middle"、"bottom"、"baseline"
縦列の構造的なグループ化を行うことができます。
span属性でグループ化する縦列の数を、width属性で列の幅を指定します。また、align、valign属性でグループ内のデータが表示される位置を指定します。終了タグ</colground>は省略がすることができます。
このようにグループ化することで、複数の縦列に対してまとめてスタイルシートを適用したり、行揃えや色の変更といったHTMLの属性を指定できるようになります。
ただし、span、widthの各属性が<col>タグ（「列にまとめて属性を設定する」で説明）に指定されている場合は、そちらが優先されます。
例
<table border="1">
<colgroup width="300"></colgroup>
<colgroup span="2" width="200" align="right"></colgroup>
<tr><td>月曜</td><td>入門クラス</td><td>受付終了</td></tr>
<tr><td>水曜</td><td>基礎クラス</td><td>募集中</td></tr>
<tr><td>金曜</td><td>応用クラス</td><td>今期休講</td></tr>
</table>
| 月曜 | 入門クラス | 受付終了 |
| 水曜 | 基礎クラス | 募集中 |
| 金曜 | 応用クラス | 今期休講 |
- □ 列にまとめて属性を設定する
<col ★>
★・・・span="グループ化する列"
width="列幅"（ピクセル、％）
align="left"、"center"、"right"
valign="top"、"middle"、"bottom"、"baseline"
複数の縦列に対して、まとめて属性を設定するときに使います。
また、<colgroup>タグのように列をグループ化する働きは持たないので注意して下さい。
ここで指定したspan、widthの各属性は&colgroup>タグに指定した場合よりも優先されます。
