HTMLテーブルタグの詳しい解説（初心者向け）

表> <TR> <TD>
<TH>
<キャプション>
■ <表> <TR> <TD>:
これら3つのタグはテーブルを定義する上で最も重要なタグであり、この3つだけを覚えておけば十分だと言えます。
<TABLE> はコンテナタグです。つまり、これがテーブルであることを宣言するために使用され、他のテーブルタグはそのスコープ内でのみ適用されます。他のコンテナタグもあります。
<TR> は表の行をマークするために使用されます。
<TD>はストレージセルをマークするために使用されます
<TABLE> のパラメータ設定（よく使用されるもの）:
たとえば、<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">
幅= "400"
表の幅は、絶対値（80 など）と相対値（80% など）を受け入れます。境界線="1"
表の枠線の太さ。ブラウザによってデフォルト値が異なるため、指定してください。セル間隔="2"
表のグリッドの太さ。グリッドを 5 に太くした例 3 を参照してください。セルパディング="2"
テキストとグリッド線の間の距離。パディングが 10 に追加された例 4 を参照してください。 align="中央"
テーブルの配置位置（水平方向）。オプションの値は、left、right、centerです。例5または6を参照してください。テーブルは中央に配置されます。一部のブラウザがサポートしないように、センタータグ<CENTER>が追加されています。これは単なるマルチレイヤー保証です。もちろん、<CENTER>のみでも許容されます。 valign="TOP" です。
表内の書道や絵画の垂直配置位置。オプションの値は、上、中、下です。背景="myweb.gif"
bgcolor ではテーブル用紙を使用しないでください。 bgcolor="#0000FF"
テーブルの背景色。背景と一緒に使用しないでください。例 6 を参照してください。境界線の色="#FF00FF"
表の境界線の色は、NC と IE で効果が異なります。例 6 を参照してください。ボーダーカラーライト="#00FF00"
表の境界線の明るい部分の色については、例 2 を参照してください。『IEのみ』 bordercolordark="#00FFFF"
表の境界線のバックライト部分の色。例 2 を参照してください。bordercolorlight または bordercolordark が使用されている場合、bordercolor は無効になります。『IEのみ』 cols="2"
テーブルフィールドの数によっては、ダウンロードする前にブラウザーがテーブル全体を描画することしかできません。
<TR> のパラメータ設定（よく使用されるもの）:
たとえば、<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> align="RIGHT"
この列の書道と絵画の水平配置位置。オプションの値は、左、中央、右です。 valign="MIDDLE"
この列の書道と絵画の垂直配置位置。オプションの値は、上、中、下です。 bgcolor="#0000FF"
この列の背景色については、例 5 を参照してください。ボーダーカラー="#FF00FF"
この列の境界線の色については、例 3 を参照してください。『IEのみ』 bordercolorlight="#808080"
列の境界線の明るい部分の色。例 3 を参照してください。『IEのみ』 bordercolordark="#FF0000"
この列の境界線のバックライト部分の色。例 3 を参照してください。bordercolorlight または bordercolordark が使用されている場合、bordercolor は無効になります。『IEのみ』
<TD> のパラメータ設定（よく使用されるもの）:
たとえば、<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%"
セル幅は絶対値（80など）と相対値（80%など）の両方を受け入れます。高さ="400"
ストレージセルの高さ。列範囲 = "5"
セルの右側に開く列の数。例6 rowspan="4" を参照してください。
セルが下に開く行数。例6 align="RIGHT"を参照してください。
このストレージセル内の書道または絵画の水平位置。オプションの値は、left、center、right です。 valign="下"
このストレージセル内の書道または絵画の垂直配置位置。オプションの値は、上、中、下です。 bgcolor="#FF00FF"
このセルの背景色については、例 4 を参照してください。ボーダーカラー="#808080"
このセルの境界線の色については、例 3 を参照してください。『IEのみ』 bordercolorlight="#FF0000"
セルの境界線の明るい部分の色。例 3 を参照してください。『IEのみ』 bordercolordark="#00FF00"
セル境界線のバックライト部分の色。例3を参照してください。bordercolorlightまたはbordercolordarkが使用されている場合、bordercolorは無効になります。『IEのみ』 background="myweb.gif"
このストレージグリッドペーパーでは、bgcolor のいずれかを使用します。
例1:
<テーブルの幅="60%" 境界線="1">
<tr><td>セルが 1 つだけのテーブル</td></tr>
1 つのセルのみで結果を表示する表の例 2:
<テーブルの幅="60%" 境界線="5" 境界線の色ライト="#FF00FF" 境界線の色ダーク="#FF0000">
<tr><td>最初の列、最初の列</td><td>最初の列、2 番目の列</td></tr>
</table> 結果を表示列 1 列 1 列 1 列 2 例 3:
<テーブルの幅="60%" 境界線="1" セル間隔="5">
<tr bordercolor="#0000FF"> <td>最初の列、最初の行</td> <td>最初の列、2 番目の行</td>
</tr>
<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>2 列目、1 列目</td> <td>2 列目、2 列目</td>
</tr>
</table> 結果を表示 1列目 1列目 1列目 2列目 2列目 1列目 2列目例4:
<テーブルの幅="60%" 境界線="1" セルパディング="10">
<tr> <td bgcolor="#FFCCE6">最初の列、最初の行</td> <td bgcolor="#FFFFC6">最初の列、2 番目の行</td>
</tr>
<tr> <td bgcolor="#FFD9FF">2 列目、1 列目</td> <td bgcolor="#DAB4B4">2 列目、2 列目</td>
</tr>
</table> 結果の表示最初の列最初の列最初の列 2 番目の列 2 番目の列最初の列 2 番目の列例 5: ソースコード
<中央>
<テーブルの幅="60%" セル間隔="0" セルパディング="2" 配置="中央">
<tr> <td bgcolor="#FFD2E9">最初の列、最初の行</td> <td bgcolor="#FFDAB5">最初の列、2 行目</td> <td bgcolor="#FFFFB5">最初の列、3 行目</td>
</tr>
<tr bgcolor="#C0C0C0"> <td>2 列目、1 列目</td> <td>2 列目、2 列目</td> <td>2 列目、3 列目</td>
</tr>
</テーブル>
</center> 結果を表示列 1 列 1 列 2 列 1 列 3 列 2 列 1 列 2 列 2 列 2 列 3
例6 ソースコード <center>
<テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 位置合わせ="中央" bgcolor="#FFC4E1" 境界線カラー="#0000FF">
<tr> <td>最初の行、最初の列</td> <td colspan="2">最初の行、2番目と3番目の列</td>
</tr>
<tr> <td rowspan="2">2 行目と 3 行目の最初の列</td> <td>2 行目、2 列目</td> <td>2 行目、3 列目</td>
</tr>
<tr> <td>列 3、列 2</td> <td>列 3、列 3</td>
</tr>
</テーブル>
</center> 結果を表示
1 列目 1 列目 2 列目と 3 列目 2 列目と 3 列目 1 列目 2 列目 2 列目 2 列目 3 列目 3 列目 2 列目 3 列目
■ <TH>: <TH> と <TD> はどちらもセルをマークしますが、唯一の違いは、<TH> でマークされたセル内のテキストが太字で表示されることです。通常、表の最初の行で列をマークするために使用されます。使用方法は、<TD> の位置を置き換えることです。パラメータ設定については、<TD> を参照してください。
もちろん、<TD> でマークされたセル内のテキストに太字マーク <B> を追加すると、<TH> と同じ効果が得られます。
例: ソースコード
<中央>
<テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 配置="中央">
<tr align="CENTER"> <th>月</th><th>IE 訪問者の %</th><th>NC 訪問者の %</th>
</tr>
<tr align="CENTER"> <td>8月</td><td>61%</td><td>39%</td>
</tr>
<tr align="CENTER"> <td>7月</td><td>54%</td><td>46%</td>
</tr>
<tr align="CENTER"> <td>6月</td><td>52%</td><td>48%</td>
</tr>
</テーブル>
</center> 結果を表示
月 IE 訪問者の割合 NC 訪問者の割合 8 月 61% 39% 7 月 54% 46% 6 月 52% 48%
■ <キャプション> ： <CAPTION> の機能は、表の上にグリッド線のないオープン列を追加するのと同じように、表のタイトル列をマークすることです。もちろん、下に配置することもできます。通常は、テーブルのタイトルを格納するために使用されます。
<CAPTION> のパラメータ設定（よく使用されるもの）:
例: <caption align="TOP" valign="TOP"></caption> align="TOP"
テーブルに対するテーブルキャプションの水平位置。可能な値は、left、center、right、top、middle、bottom です。align="bottom" の場合、ソースコードで <caption> を <table> の先頭または末尾に配置したかどうかに関係なく、キャプションはテーブルの下に表示されます。 valign="TOP"
テーブルタイトル列のテーブルに対する相対的な位置（上または下）。オプションの値は、top、bottom です。これは align="TOP" または align="BOTTOM" と同じです。機能は繰り返されますが、タイトル列を下部に配置して右または左に貼り付ける場合は、両方のパラメータを使用できます。パラメータが 1 つしかない場合は、align を優先してください。valign は HTML 3.0 でのみ導入されたパラメータだからです。
例：
<中央>
<テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 配置="中央">
<caption>Web Express 8 月の訪問者のブラウザ使用状況分析</caption>
<tr align="CENTER"> <th>月</th> <th>IE 訪問者の %</th> <th>NC 訪問者の %</th>
</tr>
<tr align="CENTER"> <td>8月</td> <td>61%</td> <td>39%</td>
</tr>
</テーブル>
</center>

<<: URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

>>: 特定の部門 ID に基づいて、すべての下位レベルの複数レベルのサブ部門を照会する MySQL の例