基礎学習チュートリアルのHTMLテーブルの表タグ

テーブルのタグ構成
HTMLのテーブルは、<table>をbodyタグとして構成し、ブラウザはこれをテーブルと解釈します。表の行は、<tr>タグで定義します。このタグは、<tr>タグのサブクラスであり、複数の<tr>タグを設定すると、表が複数の行に分割されます。また、<td>タグは、<tr>タグのサブクラスなので、各行には、列を分割するために対応する数の<td>タグを設定しなければ、完全に表を形成することはできません。
テーブルのタグの組み合わせ関係は

テーブルは、テキスト、画像、リスト、段落、フォーム、水平線、その他あらゆるhtmlタグの挿入に使用でき、ページレイアウトに使用することも可能です。しかし、テーブルレイアウトには、コードが冗長で長くなる、HTMLに準拠しない、検索エンジンに優しくない、などの問題があります。そのため、どうしてもテーブルが必要なページ以外は、テーブルをページレイアウトに使用しないことをお勧めします。
残りの <th>, <thead>, <tbody>, <tfoot> は、ブラウザがあまり対応していないため、ほとんど使われることはありません。
テーブルとボーダーのプロパティ
テーブル自身は、テーブルの境界線の幅を決定するために border プロパティを定義することができ、このプロパティの値はデフォルトで数値単位で表示され、例えば border="1″ は px の単位を持ちます。
テーブルのヘッダー
テーブルヘッダは、<table>に<th>タグで設定することができます。テーブルヘッダの <th> タグは <tr> タグと同じ階層にあり、一般にヘッダは <tr> タグの前に表示されます。表の場合、ヘッダーは必須ではなく、必要に応じて挿入することができます。また、<th>タグの中のテキストは自動的に太字になります。
セルの結合
セルは縦と横に統合されますが、統合する際に他の行や列にも対応する数のセルが存在することを確認する必要があります。
水平方向のマージセルにはcolspan属性を使用し、その値は数値の形でマージするセルの数を決定します。例えば、colspan="2″は右側に2セルマージすることを意味します。
垂直方向にマージされるセルにはrowspan属性が使われます。これは水平方向のマージ属性と同じで、マージするセル数を決定する数値形式でもあります。
デモのためのコード例です。

デモ効果例。

セル余白
テーブルには、パディングスタイルと同様のインナーマージンの機能があります。cellpadding属性は、<table>タグ内で定義され、そのタグ内の全ての<td>要素の内余白を設定します。cellpadding属性パラメータは余白の大きさを決定する数値で、例えば cellpadding="10″ はテーブル内の全ての <tr> タグに10pxの内余白があることを意味します。
セル間隔
セルスペーシングは、<tr>タグの余白を設定するもので、cssスタイルのmarginとも似ていますが、<table>タグ内にcelspacingプロパティを定義すると、そのタグ以下の全てのtd要素に対して余白を設定することができます。この属性はまた、余白の大きさを数値で決定します。例えば、celspacing="10″は、このテーブル内のすべての <tr> タグに10pxの余白があることを意味します。
フォームの背景を設定する
テーブルは、cssのbackgroundと同様に、backgroundプロパティを使って、任意の画像をテーブルやセルの背景に設定することができます。背景に対応する画像のパスを設定することで、セルに対応する画像を表示させることができます。例えば、background="table_bg.gif"のようになります。
テーブルコンテンツのアライメント
テーブルのアライメントは、水平方向と垂直方向のアライメントに分けられます。これらはalign属性とvalign属性で、対応する<td>タグに挿入して、セル内のテキストや画像の位置を揃えます。
水平方向のアラインメントには、left-left、center-horizontal、right-rightの3つの値があります。
垂直方向のalignmentvalingも3つの値を持っています：top 上揃え、middle 垂直方向の中央揃え、bottom 下揃え、そしてbaseline ベースライン揃えです。
このうち、ベースライン揃えは文字通りの意味ではないかもしれないが、実際には、表の中央に右寄せではなく、中央上部にテキストが表示されることを意味する。文字が大きすぎなければ、真ん中と似たような効果になりますが、真ん中より少し上に表示されます。

追記：CSSのtable-layout文について
このステートメントは、テーブルの表示スタイルを指定するために、例えば次のように使用できます。

3つの値を取ることができます。
* auto（デフォルト）
* 固定
* 継承する
autoはセルの大きさが内容によって決まること、fixedはセルの大きさが固定され、指定した大きさの最初のセルによって決まること、すべてのセルに大きさが指定されていない場合は、最初のセルによってデフォルトサイズが決まること、セル内の内容がセルの大きさを超える場合は、CSSのoverflowコマンドで制御されること、を意味します。マイクロソフトは、このコマンドを使うことでテーブルの表示を100倍高速化できるとしている。
ちなみに、テーブルの表示を高速化するためには、あらかじめCSSでテーブルの幅と高さを指定しておく（またはtableタグのwidthとheightのプロパティで指定する）とよいでしょう。