こんな人に読んで欲しい！
・HTML／CSS上での表の作り方を知りたい人
こんにちは、「なゆた」です！
皆さんは、「HTML／CSS上での表の作り方を知りたい」と思ったことはありませんか？
今回は、「CSS」での「４分割の表」の作り方についてをお教えします！
《主な使用タグ》（HTMLファイル）
table・・・表組みを示す要素。一般的に表組みは、一覧表や年表など表の形にまとめる際に使用する。
tr・・・表組みの行を表す要素。tr 要素内には、セル内の見出しとして、th 要素か、データを格納するtd 要素を入れる。
td・・・データセルを示す要素。実際の表データはこの要素に入れる事になる。
《主な使用タグ》（CSSファイル）
border-collapse・・・table 要素のセル同士の重なる部分の枠線を結合するか分離させるかを指定するプロパティ。
「HTMLファイル」篇
①まず、＜table＞タグを入れます。
②次に、＜tr＞タグ、その中に＜td＞タグを入力し、＜td＞タグ内に項目名を入れます。そして＜/tr＞タグで締めます。（項目名の文字数によって、表の長さが変わります。）
③最後に、②の作業をもう一度だけ繰り返し、＜/table＞タグで締めます。さあ次は、「CSSファイル」と連携です！
「CSSファイル」篇
①まずは、＜table＞タグです。中にborder-collapse 属性を入れて、属性内に『結合』を意味する「collapse」コードを入れます。
②次は、＜table＞タグ内の＜td＞タグです。border 属性を入れて、その中に以下のコードを入力します。（例はトマト色です。）
③これで、完成です！
いかがでしたか？この作業は、HTMLファイルでの作業を何回でも繰り返すことによって、分割数も変わりますよ！皆さんも、よかったらやってみてください！
以上です、ありがとうございました！
コメント