皆さんはHTMLで表を書いたことがありますか？
今回は表を書くときに便利な<table>というタグを紹介します。
タグの使い方
<table>タグは表を作るのに便利なタグですが、このタグだけでは書くことができません。
表を書くには…
| タグ名 | 内容 | 構成 |
| <table> | 表全体の外枠 | テーブル全体 |
| <tr> | １行を作る | 行 |
| <th> | 表のヘッダー(※太字・中央揃え) | 見出し |
| <td> | 実際のデータを入れる | データ |
以上の４つのタグが最低でも必要になります。
試しに使ってみると…
See the Pen Untitled by 竹岡美虹 (@szgmpkzc-the-looper) on CodePen.
この様になりました。一番シンプルな表の出来上がりです！
しかしこれでは表なのに枠線や空白がなく、少し見にくいなと思う方が多いと思います。
そんなときは…
See the Pen Untitled by みちゃーん (@szgmpkzc-the-looper) on CodePen.
※border-collapse: collapse; → 枠線が重ならずスッキリさせることができる
このようにしてCSSで枠線や空白を入れると見やすくなります！
セクショニング
このままでも十分見やすいのですが、セクショニングをすることで更にきれいなHTMLを作れたり、CSSが書きやすくなったりします🎶
セクショニングと聞くとあまりピンとこないかもしれませんが、私達もすでによく使っています。
例えば… <header> <footer> <section> <article> などがあります。
今回はそれらの友達である<table>のセクショニングタグを紹介します。
| タグ名 | 意味、役割 |
| <thead> | テーブルのヘッダー部分：列、タイトルなどをまとめる |
| <tbody> | テーブルの本体部分：実際の情報が入る |
| <tfoot> | テーブルのフッター部分：合計、備考などに使う |
実際に書いてみます。
See the Pen Untitled by 竹岡美虹 (@szgmpkzc-the-looper) on CodePen.
表のデザインは変わっていませんが、HTMLを見てみると先程よりもどこに何が書いてあるのかわかりやすくなったように思います。
CSSでデザインを変えるときにも便利な機能です。
最後に
４つのタグを使うことで簡単に表が作れるなんてとても便利だと思いました💬
みなさんも表を作りたいと思うタイミングがありましたら、ぜひ使ってみてください❣️
コメント