2019.03.03こんにちは、ゆんつです。HTMLにtableという表を作るためのタグがあります。表というと僕は真っ先にエクセルで作ったこんな表を連想します。こんな感じの表がtableタグとその関連のタグを使うことでWEBページ上で作成できるのです。独特な書き方をするタグで、書き慣れていないといざ表を作る時に考えてしまうことが多いので、今日はtableタグによる表の作り方などについて書き残しておきます。table表全体を囲むtr行を定義するthヘッダーセル(見出し)を定義するtdデータセルを定義する表完成までのイメージとしては、tableタグでまず表を作ることを宣言して、そのtableタグの中にtrタグを入れて行を定義し、trタグの中に更にthタグ、tdタグを入れ子にしていく感じですね。先ほどの表に当てはめてみるとこんな感じになります。実際にtableタグを使って表を作ってみます。CodePen.0こんな感じになりましたまだ線はついていません。線がついていないのでtable要素、th要素、td要素にCSSで線を付けます。CodePen.0線を付けただけで背景色を付けたりセルの大きさを整えていませんが、一応表ができています。見慣れた表とは決定的に違うものがあります。それは線が2重であるということです。ゆんつあれ?なぜ線が2重なのか?tableだけに線を設定してみます。CodePen.0ぐるっと表の周囲が線で囲まれました。次にthとtdだけに線を設定してみます。CodePen.0見出しとデータセルの周りに線が付きました。CodePen.0ヘッダーセル、データセルを囲む線と、それらをまとめて囲むtableの線とで二重線になるのです。collapse;を指定します。CodePen.02本あった線は1本になり、すっきりとした表のスタイルになります。セルを結合するエクセルと同じようにセルを結合することもできます。CodePen.0とても簡単に結合することが出来ます。書けるようになりたい以上基本的なtableの作り方について書きました。あとはそれぞれの要素の幅を広げたり、背景色をつけたりすれば普段エクセルなどで作成する表と同じものがHTMLとCSSを使って作成することが出来ます。CodePen.0tableはプロフィール欄や会社概要ページなど、表形式で情報を表示したほうが見やすい場面では良く用いられています。自分のイメージする表をあまり考えこまずにHTMLとCSSでサっとかけるようになりたいですね。ゆんつ本日は以上ですそれでは、またですー。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。