この記事の内容はテーブルとは何か？ HTML でのテーブルの紹介は、参考にしていただければ幸いです。
フォームとは何ですか?テーブルは行と列で構成された構造であり、ページをレイアウトするために行と列に従ってデータが表示されます。このレイアウト方法は時代遅れです。ページ レイアウトを実装するには、p+css を使用することをお勧めします。
HTML テーブルの作成方法: HTML テーブルは、table タグ、caption タグ、および 1 つ以上の tr、th、または td タグで構成されます:
1. table タグは、テーブルと全体を定義するために使用されます。 table は
| と | タグと | タグが配置されることを示します。この td タグまたは th タグのペアの構文は次のとおりです: <table>
<caption>表格标题</caption>
<tr>
<th>1行1列的内容</th>
<th>1行2列的内容</th>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>ログイン後にコピー 注: th と td :th の違いは、デフォルトで太字で中央揃えでセルに表示されます。 テーブルのいくつかの一般的なラベル属性1. 境界線ラベル属性: 境界線属性は、各セルに境界線を追加し、境界線でテーブルを囲みます。 border 属性 値が変更されると、テーブルの周囲の境界線のサイズのみが変更され、テーブル内の境界線の幅は 1 ピクセルになります。境界線の設定には、border style 属性を使用することをお勧めします。ボーダーを設定するには、border タグ属性を使用します。 2. width タグ属性: 設定 テーブルの幅を決定するには、width スタイル属性を使用してテーブルの幅を設定することをお勧めします。幅を設定する属性。このタグ属性には複数の値があります: 値 説明する ピクセル 幅をピクセル単位で設定します (例: width="50")。 % 幅を、含まれる要素のパーセンテージとして設定します (例: width="50%")。 3. align label 属性: この効果を実現するには、float スタイル属性を使用することをお勧めします:value。 説明する 左 表を左揃えにします。 右 テーブルを右に揃えます。 中心 テーブルを中央揃えにします。 4. bgcolor ラベル属性: テーブルの背景色を指定します。この効果を実現するには、background-color スタイル属性を使用することをお勧めします: value。 説明する 色名 カラー値がカラー名の背景色 (「red」など) であることを指定します。 hex_number 背景色を 16 進数値で指定します (「#ff0000」など)。 rgb_number RGB コードで背景色として色の値を指定します (例: "rgb(255,0,0)")。 5. Cellpadding ラベル属性: セルの境界とセルの内容の間の間隔を設定します (単位: px)。その効果を実現するには、パディング スタイル属性を使用することをお勧めします。6. Cellspacing ラベル属性: 間の間隔を指定します。セルの間隔 (単位: px) 上記は、table タグの一般的に使用されるタグ属性のリストです。さらに、table タグには、frame、rules、summary の 3 つのタグ属性もあります。ただし、frame と rules はサポートされていません。 Internet Explorer ブラウザー。この属性と概要タグ属性はブラウザーで視覚効果を生成しないため、これら 3 つのタグ属性は無視されます。tr label 属性 1. align label 属性: テーブル行のセル内容の水平方向の配置を設定します。この label 属性には複数の値があります:左 コンテンツを左揃えにします (デフォルト)。 右 コンテンツを右揃えにします。 中心 コンテンツを中央揃えにします。 正当化する (新聞や雑誌のように) 各行が同じ長さになるように行を引き伸ばします。 チャー コンテンツを指定した文字に揃えます。注: ブラウザはこのタグの属性値をサポートしていません。 2. bgcolor ラベル属性: テーブル行の背景色を設定します。この効果を実現するには、background-color スタイル属性を使用することをお勧めします: value。 説明する 色名 カラー値がカラー名の背景色 (「red」など) であることを指定します。 hex_number 背景色を 16 進数値で指定します (「#ff0000」など)。 rgb_number RGB コードで背景色として色の値を指定します (例: "rgb(255,0,0)")。 3. valign label 属性: テーブル行のセルの内容の垂直方向の配置を設定します。この label 属性には複数の値があります: 値。 説明する 上 コンテンツの上端を揃えます。 真ん中 コンテンツを中央揃えにします (デフォルト)。 底 コンテンツを下に揃えます。 ベースライン ベースラインに合わせます。 th および td ラベル属性 1. align label 属性: セルの内容の水平方向の配置を設定します。この label 属性には複数の値があります: 値。 説明する 左 コンテンツを左揃えにします (td タグのデフォルト)。 右 コンテンツを右揃えにします。 中心 コンテンツを中央揃えにします (タグのデフォルト)。 正当化する (新聞や雑誌のように) 各行が同じ長さになるように行を引き伸ばします。 チャー コンテンツを指定した文字に揃えます。注: ブラウザはこのタグの属性値をサポートしていません。 2. bgcolor ラベル属性: セルの背景色を設定します。この効果を実現するには、background-color スタイル属性を使用することをお勧めします: value。 説明する 色名 カラー値がカラー名の背景色 (「red」など) であることを指定します。 hex_number 背景色を 16 進数値で指定します (「#ff0000」など)。 rgb_number RGB コードで背景色として色の値を指定します (例: "rgb(255,0,0)")。 3. valign label 属性: セルの内容の垂直方向の配置を設定します。この label 属性には複数の値があります: top コンテンツの上端を揃えます。 真ん中 コンテンツを中央揃えにします (デフォルト)。 底 コンテンツを下に揃えます。 ベースライン ベースラインに合わせます。 4. width ラベル属性と高さラベル属性: セルの幅と高さを設定するには、width スタイル属性と高さスタイル属性を使用することをお勧めします。高さラベル属性の設定。このラベル属性には複数の値があります: value 説明する ピクセル ピクセル単位の幅または高さの値 (「100px」など)。 パーセント 含まれる要素のパーセンテージとしての幅または高さの値 (「20%」など)。 5. nowrap ラベル属性: セルのコンテンツを折り返すかどうかを設定します 6.colspan ラベル属性と rowspan ラベル属性: セルがまたがる列数と行数をそれぞれ設定します 関連する推奨事項: HTMLの小さなタグは何を意味しますか? smallタグの使用例 HTMLフォントタグのcolor属性とは何ですか？フォントカラーの使い方紹介（カラーコード表付き） |
|---|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
