タグと CSS だけを使用してテーブルを作成する方法

」タグがその中にあります。

---

---

例
テーブルを作成するには、次の HTML コード例を検討してください。

< 分周 クラス = 「divテーブル」 >
< 分周 クラス = 「ヘッダー行」 >
< 分周 クラス = 「分割セル」 >< b > ID < / b >< / 分周 >
< 分周 クラス = 「分割セル」 >< b > 名前 < / b >< / 分周 >
< 分周 クラス = 「分割セル」 >< b > 年 < / b >< / 分周 >
< / 分周 >
< 分周 クラス = 「divRow」 >
< 分周 クラス = 「分割セル」 > 001 < / 分周 >
< 分周 クラス = 「分割セル」 > スミス < / 分周 >
< 分周 クラス = 「分割セル」 > 25 < / 分周 >
< / 分周 >
< 分周 クラス = 「divRow」 >
< 分周 クラス = 「分割セル」 > 002 < / 分周 >
< 分周 クラス = 「分割セル」 > ジョン < / 分周 >
< 分周 クラス = 「分割セル」 > 31 < / 分周 >
< / 分周 >
< 分周 クラス = 「divRow」 >
< 分周 クラス = 「分割セル」 > 003 < / 分周 >
< 分周 クラス = 「分割セル」 > チャールズ < / 分周 >
< 分周 クラス = 「分割セル」 > 28 < / 分周 >
< / 分周 >
< / 分周 >

上記のコード スニペットでは、次のようになります。

• 「
  」タグは、「」という名前のクラスで追加されます divテーブル 」。
• 「の中に 分周 ” コンテナ要素、別の追加 “ 分周 」 として宣言されたクラスを持つコンテナ要素 ヘッダー行 」。
• もう一度、「」を 3 つ追加します。 分周 ” という名前のクラスを持つ要素 divRow 」と「 divセル ' クラス。
• 次に、3 つの div 要素を追加し、「 ID 」、「 名前 ' と ' 年 」が表のヘッダー行に表示されます。
• その後、div要素ごとに「ID」「Name」「Age」の値を指定します。

これはすべて、「 分周 」要素を使用してテーブルを作成します。それでは、CSS プロパティを適用してみましょう。

---

---

.divテーブル
{
表示: 表;
幅 :自動;
バックグラウンド- 色 :#ええ;
国境 :1px ソリッド # 666666 ;
ボーダー間隔:5px;
}
.divRow
{
幅 :自動;
表示:テーブル行;
}
.divCell
{
幅 :150px;
フロート:左;
表示:テーブル列;
バックグラウンド- 色 : RGB ( 212 、 209 、 209 ) ;
}

上記の CSS スタイル要素では:

• 「」を参照するセレクターを追加します。 divテーブル 」 (すべてのテーブル値を含む) を作成し、目的の CSS プロパティを定義します (つまり、「 画面 」、「 幅 」、「 背景色 」、「 国境 ' と ' ボーダー間隔 」) テーブル コンテンツの場合。
• その後、' の要素を選択するクラス セレクターを追加します。 divRow ”CSSを追加するクラス” 幅 ' と ' 画面 要素へのプロパティ。
• 最後に、CSS スタイル プロパティを「 .divCell 」 クラスセレクター。

これにより、出力にテーブルが作成され、次の結果が表示されます。