HTMLのtd要素、th要素とrowspan属性の使い方を現役デザイナーが解説【初心者向け】
初心者向けにHTMLのtd要素、th要素とrowspan属性の使い方について解説しています。これは表の中のセルを結合するときに使用されます。同じくセルを結合するcolspanとの違い、書き方と結合するセルの数の設定方法について勉強しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLのtd要素、th要素とrowspan属性の使い方について解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
td要素、th要素とrowspan属性の使い方について詳しく説明していくね！
お願いします！
td要素、th要素のrowspan/colspan属性とは
htmlでtableタグを使用して表を作成する場合、tdやth、trを使用して表を作成します。
- th要素は太字で中央揃えになるため、見出しとなる要素に使用します
- td要素は、左揃えで通常の文になるため、表の1つ1つの要素に使います
- trは列を作ります。thやtdを囲んで1つの列にします
th、td要素はrowspanやcolspan属性を持っています。これは、テーブルを結合するのに使用します。エクセルで結合するのと同じ感じです。縦に結合する時にはrowspanを、横に結合する場合はcolspanを使用します。
rowspan/colspan属性の書き方
縦に結合する場合は、結合を始める一番上のth/td要素のrowspan属性に結合する数を指定します。横に結合する場合は、結合する一番左のth/th要素のcolspan属性に結合する数を指定します。
書き方は以下の通りです。
<th rowspan=”2″>...</th> <th colspan="3">...</th>
実際に書いてみよう
それでは実際に表を書いてみましょう。以下のコードを書きます。
<table>
<tr>
<th>種類</th>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td rowspan="2">飲み物</td>
<td>お茶</td>
<td>150円</td>
</tr>
<tr>
<td>コーラ</td>
<td>150円</td>
</tr>
<tr>
<td>食べもの</td>
<td colspan="2">おにぎり</td>
</tr>
</table>
結果は以下のようになります。飲み物が縦に結合され、おにぎりが横に結合されていると思います。
結合された場合、列のタグの数が変わるので注意しましょう。
| 種類 | 商品名 | 価格 |
|---|---|---|
| 飲み物 | お茶 | 150円 |
| コーラ | 150円 | |
| 食べもの | おにぎり | |
以上で解説を終わります。
監修してくれたメンター
| メンター金成さん
2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
