テーブルセルの目的
テーブルセルは、それ自体と同様の他の多数のセルで構成されるテーブル内の個々のエントリです。テーブル セルの主な目的は、理解しやすくするためにデータを秩序だった方法で記録することです。これは、エントリが含まれるテーブル内の特定の位置を示します。
テーブルセルの種類
HTML の表には主に 2 種類のセルがあります。これらは ' ヘッダーセル ' と ' データセル ”。それらの相違点と類似点については、以下で詳しく説明します。
ヘッダーセル
ヘッダーセルは「」で表されます。 <番目> HTML Tailwind CSS の「」タグ。これらは、テーブル内の列のタイトルを構成します。ヘッダーは、特定の列のすべての値が何になるかを定義します。ヘッダーの例としては、名前、電子メール アドレス、連絡先番号、社会保障番号などが挙げられます。
テーブルのヘッダー セルは列の先頭にあり、その下のエントリはデータ セルになります。これらのセルには、以下に続くデータ セルと区別するための特定の書式設定もあります。ヘッダー セルは、データ セルの内容に意味を追加するために、より大きなフォント サイズと太字になるように指定されています。
例
以下のコードでは、「
< テーブル >
< 宣伝 >
< tr >
< 番目 > ヘッダーセル01 < / 番目 >
< / tr >
< / 宣伝 >
< / テーブル >
このコード ブロックでは次のようになります。
- 「
」タグでテーブルを作成します。
」タグをそれぞれ閉じて表のセルが完成します。- ここで、「
」タグを使用してテーブルのヘッダー セルを作成します。 - 次に、セルエントリ「」を定義します。 ヘッダーセル01 「
」タグ内で「 」「」「」タグを使用します。 - 最後に、「
- ここで、「
出力
ご覧のとおり、ヘッダー セルはデフォルトで太字で表示されます。
データセル
データセルは「」で表されます。 データ セルにも特定の書式設定があります。これらのフォント サイズはヘッダー セルより小さく、要件に応じてプレーン テキストまたは数字が含まれます。 「名前」ヘッダー セルの下のデータ セルには、関係する個人の名前 (例: John、David、Michael、James) が含まれるようになります。 例 次の手順では、テーブル データ セルを作成するコードについて説明します。 HTML Tailwind CSS の「」タグ。これらのセルには、テーブル内のすべての情報が保持されます。これらはヘッダー セルの下にリストされており、特定のヘッダーのすべてのエントリのデータが含まれています。たとえば、ヘッダー セルのタイトルが「名前」の場合、その下のデータ セルには、データが記録されているすべての担当者の名前が含まれます。
「」を使用してテーブルデータセルを作成するコード ”タグは以下の通りです。
< 頭 >
< スタイル >
テーブル {
境界崩壊: 崩壊;
}
た {
国境 : 1px ソリッドブラック;
パディング: 10px;
}
< / スタイル >
< / 頭 >
< 体 >
< テーブル >
< tr >
< た >テーブルセル< / た >
< / tr >
< / テーブル >