こんにちは。IWACODEの岩村彰斗です。
今回はtableタグについて、初心者の方向けに、基本的なコーディング方法について解説いたします。
tableタグって、trとかthとかいろいろ出てきて覚えづらいんですよね･･･
筆者tableタグはdivタグやpタグと違って、使用するタグにルールがあるため、少し癖がありますね。
どのようにして覚えていったらよいでしょうか？
筆者タグの名前と文章だけ見ても中々覚えづらいので、実際に手を動かして作りながら覚えていきましょう！
今回は以下のようなレイアウトを作っていきます。
よく見かけるレイアウトですね！
筆者作り方さえ覚えてしまえば、ある程度のレイアウトは応用して作れるようになるので、頑張っていきましょう！
tableタグで使用されるタグの種類
筆者まず、tableタグで使用されるタグは以下のようになります。
- <table>・・・</table>
- <tr>・・・</tr>
- <th>・・・</th>
- <td>・・・</td>
- <thead>・・・</thead>
- <tbody>・・・</tbody>
- <tfoot>・・・</tfoot>
いや、いきなり７つ出てきたんですけど・・・
筆者７つ記載しましたが、頻繁に使用するのは、tr、th、tdです！
まず先ほどのレイアウトがどのように構成されているか見てみましょう！
筆者tableタグが一番外側にあって、１行ずつtrタグが記載されていますね。
tableタグの基本的な記載方法について
見出し（header）にあたる部分のコーディング
筆者では、まずこの上の見出しの部分からコードを書いていきますね。
<table>
<thead>
<tr>
<th></th>
<th>国語</th>
<th>算数</th>
<th>理科</th>
<th>社会</th>
</tr>
</thead>
</table>
<style>
thead {
background-color: #2CA5FF;
color: #fff;
}
th,
td {
border-collapse: collapse;
border: 3px solid #fff;
padding: 10px;
text-align: center;
width: 100px;
}
</style>
筆者上の見出し部分だけ作成してみました。
trタグの中にthタグとtdタグが入るんですね！
筆者tableタグの構成では、大枠をtableタグとして、その中にデザイン上１行ずつコーディングを行っていきます。
１行ずつtrタグで囲っていくイメージですね！
・trタグ
Table Rowの略で、tableタグ内の行を意味します。子要素としてthタグ、tdタグを使用することができます。
・thタグ
Table Headerの略で、tableタグ内の見出しとして使用します。
・tdタグ
Table Dataの略で、tableタグ内のデータとして使用します。
theadタグで囲われていますが、これはどのような意味なのでしょうか？
筆者theadタグは、HTML上でどこが見出し部分にあたるのかわかりやすくするために使用すると認識いただいて大丈夫です。
また、CSSの適用が行いやすくなるなどの利点があります。
見出しにあたる部分をtheadタグで囲っているので、例えばtheadタグにbackgroundプロパティを指定すれば、一気に背景色が変更できますね！
筆者次は内容部分のコーディングを行っていきます。
内容（body）にあたる部分のコーディング
<table>
<thead>
<tr>
<th></th>
<th>国語</th>
<th>算数</th>
<th>理科</th>
<th>社会</th>
</tr>
</thead>
<!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
<tbody>
<tr>
<th>A君</th>
<td>80</td>
<td>85</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<th>B君</th>
<td>85</td>
<td>90</td>
<td>95</td>
<td>80</td>
</tr>
<tr>
<th>C君</th>
<td>90</td>
<td>95</td>
<td>80</td>
<td>85</td>
</tr>
</tbody>
<!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
</table>
<style>
thead {
background-color: #2CA5FF;
color: #fff;
}
th,
td {
border-collapse: collapse;
border: 3px solid #fff;
padding: 10px;
text-align: center;
width: 100px;
}
/* ↓↓↓ CSSはここから追記 ↓↓↓ */
tbody {
color: #555;
font-weight: 700;
}
tbody th {
background-color: #2CD9FF;
}
tbody td {
background-color: #FFF8DF;
}
/* ↑↑↑ CSSはここから追記 ↑↑↑ */
</style>
筆者内容部分を３行分追加しました。
内容部分はtbodyで囲ってありますね！
筆者tbodyタグも同様に、記載しなくても動作しますが、はやり囲っておいた方が見やすく、丁寧な記載になります。
thタグとtdタグが使用されていますが、この違いは何ですか？
筆者見出しにあたる部分はthタグを使用し、データ部分にあたるところはtdタグを使用しますね！内容部分でも一番左側が見出しになっているので、thタグを使用しています。
tbodyで囲っているので、tbodyの中のthタグというようにCSSが適用できますね！
筆者theadタグと同様にCSSが適用しやすくなるのも良いところですね。
では最後に表のフッター部分を作成していきます。
フッター（footer）にあたる部分のコーディング
<table>
<thead>
<tr>
<th></th>
<th>国語</th>
<th>算数</th>
<th>理科</th>
<th>社会</th>
</tr>
</thead>
<tbody>
<tr>
<th>A君</th>
<td>80</td>
<td>85</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<th>B君</th>
<td>85</td>
<td>90</td>
<td>95</td>
<td>80</td>
</tr>
<tr>
<th>C君</th>
<td>90</td>
<td>95</td>
<td>80</td>
<td>85</td>
</tr>
</tbody>
<!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
<tfoot>
<tr>
<th>平均</th>
<td>85</td>
<td>90</td>
<td>90</td>
<td>85</td>
</tr>
</tfoot>
<!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
</table>
<style>
thead {
background-color: #2CA5FF;
color: #fff;
}
th,
td {
border-collapse: collapse;
border: 3px solid #fff;
padding: 10px;
text-align: center;
width: 100px;
}
tbody {
color: #555;
font-weight: 700;
}
tbody th {
background-color: #2CD9FF;
}
tbody td {
background-color: #FFF8DF;
}
/* ↓↓↓ CSSはここから追記 ↓↓↓ */
tfoot {
background-color: #ECECEC;
color: #555;
font-weight: 700;
}
/* ↑↑↑ CSSはここから追記 ↑↑↑ */
</style>
筆者フッター部分を追加しました。これで完成ですね！
フッター部分はtfootタグを使用するんですね！
筆者theadタグ、tbodyタグと同様にフッター部分にあたる箇所をtfootタグで囲っております。
さいごに
今回は基本的なtableタグの記載方法について解説させていただきました。
theadタグ、tbodyタグ、tfootタグについてはなくても問題はないのですが、メンテナンスの観点から考えると、囲っておいた方が構成が分かりやすく、管理もしやすくなるため、記載したほうが良いと考えております。
今回ご紹介した以外にも、Excelのようにセルが結合されているような表も実装することができ、こちらは別途解説させていただく予定です。
複雑そうに見えて、実際のところ、trタグの中にthタグ、tdタグを繰り返し記載していくことが多いので、実際にコーディングをしながら慣れていきたいですね！
今回の記事が参考になりましたら幸いです。
