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

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

テキスト、画像、リスト、段落、フォーム、水平線などの任意の HTML タグをテーブルに挿入でき、ページ レイアウトにも使用できます。しかし、テーブルレイアウトには、コードの冗長性が多すぎる、HTML 標準に準拠していない、検索エンジンに不向きであるなどの問題があります。したがって、ページ上でテーブルが本当に必要な場合を除き、ページ レイアウトにテーブルを使用しないことをお勧めします。
残りの <th>、<thead>、<tbody>、<tfoot> は、ブラウザのサポートが不十分なため、ほとんど使用されません。

表と境界線のプロパティ
テーブル自体で border 属性を定義して、テーブルの境界線の幅を決定できます。この属性の値は、デフォルトではデジタル単位で表示されます。たとえば、border="1" の値は px 単位です。注意: 境界値の後に単位を追加しないでください。そうしないと、値が正しく認識されません。

表のヘッダー
<table> では、<th> タグを使用してテーブル ヘッダーを設定できます。テーブル ヘッダーの <th> タグは <tr> タグと同じレベルにあり、テーブル ヘッダーは通常 <tr> タグの前に表示されます。表の場合、ヘッダーは必要ないので、必要に応じて挿入できます。 <th> タグ内のテキストは自動的に太字になります。

セルの結合
セルの結合は垂直結合と水平結合に分かれており、結合する際には他の行や列に該当する数のセルが存在するかどうかを判断する必要があります。
colspan 属性は、セルを水平に結合するために使用されます。その値は、結合するセルの数を決定する数値です。たとえば、colspan="2" は、2 つのセルを右に結合することを意味します。
rowspan 属性は、セルを垂直に結合するために使用されます。これは、水平結合の属性と同じです。結合するセルの数も数値で決定されます。たとえば、rowspan="2" は、2 つのセルを下に結合することを意味します。
デモコードの例:

デモンストレーション効果の例:

セルの余白
テーブルには、パディング スタイルと同様のパディング機能があります。 <table> タグで cellpadding 属性を定義すると、その下のすべての <td> 要素の padding を設定できます。 cellpadding 属性パラメータ値は、余白のサイズを決定する数値です。たとえば、cellpadding="10" は、テーブル内のすべての <tr> タグの内側の余白が 10 ピクセルであることを意味します。

セル間隔
セル間の間隔は、CSS スタイルの margin に似た <tr> タグの外側の余白を設定するためのものです。<table> タグで cellspacing 属性を定義すると、そのタグの下にあるすべての td 要素の外側の余白が設定されます。この属性は、余白のサイズを数値の形式で決定します。たとえば、cellspacing="10" は、このテーブル内のすべての <tr> タグの余白が 10 ピクセルであることを意味します。

テーブルの背景を設定する
テーブルでは、background プロパティを使用して、任意の画像をテーブルまたはセルの背景として設定できます。その使い方は、CSS の背景と非常に似ています。背景に対応する画像パスを設定することで、セルに対応する画像を表示できます。たとえば、background = "table_bg.gif"

表の内容の配置
表の配置は、水平配置と垂直配置に分かれています。これらは align 属性と valign 属性です。これら 2 つの属性を対応する <td> タグに挿入すると、セル内のテキストまたは画像の配置を完了できます。
水平方向の配置には、左、中央、右の 3 つの値があります。垂直方向の配置にも、上、中央、下、ベースラインの 3 つの値があります。
ベースライン配置は文字通りには理解されないかもしれません。実際、ベースライン配置は、テキストが中央ではなく、表の上部中央部分に表示されることを意味します。テキストが大きくない場合は、効果は中間と似ていますが、中間よりもわずかに高くなります。

PS: CSS のテーブルレイアウトステートメント
このステートメントは、テーブルの表示スタイルを指定するために使用できます。

次の 3 つの値を取ることができます。
* 自動（デフォルト）
* 修理済み
* 継承
auto は、セルのサイズがその内容によって決定されることを意味します。固定とは、セルのサイズが固定され、指定されたサイズを持つ最初のセルによって決定されることを意味します。指定されたサイズのセルがない場合、最初のセルのデフォルト サイズによって決定されます。セル内のコンテンツがセルのサイズを超える場合は、CSS のオーバーフロー コマンドによって制御されます。 Microsoft は、このコマンドを使用すると、テーブルの表示が 100 倍速くなると主張しています。
ちなみに、表の表示を高速化するために、表の幅と高さをCSS（またはtableタグのwidth属性とheight属性）であらかじめ指定しておくと良いでしょう。