この記事のまとめWebサイト(ホームページ)で“表”を作るにはtableタグ、trタグ、thタグ、tdタグなどの表専用のHTMLタグを使います。表組みに関係するHTMLタグは種類が多いので最初は少し複雑に感じるかもしれません。今回は表組みの基本である4種類のタグから少しマイナーなタグまで、タグの意味・役割から基本の使い方まで基礎的なことを紹介します。表を作るために使うHTMLタグ表を作るためのHTMLタグは以下の10種類になります。tableタグtrタグthタグtdタグtheadタグtbodyタグtfootタグcaptionタグcaptionタグcolgroupタグcolタグ表組み関係のタグは種類が多く、名前も似ているので表用のタグを完璧に覚えるのはHTMLの中でも比較的高難易度に分類されると思います。HTMLでは基本的にtable、tr、th、tdタグを組み合わせて1つの表を組み上げます。pタグやaタグなどは、そのタグだけで完結するのに対し、これら4種類のタグを“的確に”組み合わせないと表が完成しないので注意が必要です。tableタグ以外にも箇条書きリストや説明リストも複数のタグを使って1つの要素を形成するHTMLタグです。表の基本となる4種類のタグ「table・tr・th・td」まずは、table、tr、th、tdタグについて、それぞれの意味と役割を見ていきましょう。tableタグtableタグは表を作成する基本となるタグで“表のエリア全体”を意味します。tableタグで囲まれている部分が表ということになります。tableタグの直下にはtr、thead、tbody、tfoot、caption、colgroup、colの7種類のタグしか入れることはできないので注意しましょう。Row”の頭文字で、意味としては「表の行」となります。trタグは表の中の1行を囲むのに使うタグということです。trタグ1つで1行となるので、実際の表を作る場合には行数分のtrタグを記述することになります。Header”の頭文字で、意味としては「表の見出し」となります。thタグは表内の見出しのセルを指定するのに使うタグです。原則、trタグの中に記述します。Data”の頭文字で、意味としては「表のデータ」となります。tdタグは表内の一般的なセルに使うタグで、こちらのtdタグもtrタグの中に記述します。基本的に表のデータはtdタグでマークアップします。tableタグの直下にtrタグがあり、trタグの中でth、tdタグを使う形になります。意味を覚えたら実際に記述しながら使い方を覚えていきましょう。tableタグを記述するHTML<table></table>まずは表全体を囲うtableタグからマークアップしました。この状態では内容が無いので表示されません。<tr></tr></table>tableタグの中にtrタグを3行分書きました。あたりまえですが、まだ内容は表示されていませんね。<tr></tr></table>ここで表示してみると以下のようになるはずです。(デザインはCSSによって異なりますが)とりあえず、表っぽい感じが出てきましたね。続けてデータセルを作っていきましょう。118円td要素をいれると一気に表になりますね!。thタグ、tdタグという構造になります。これを覚えれば、まずは基本的な表は作れます。表で行と列の数を変えるには?基本的な表のマークアップスタイルが分かったところで、「行」と「列」について考えてみたいと思います。先程の例で何となく分かっているかもしれませんが、行の数はtrタグで決まり、列の数はthタグ・tdタグの数で決まります。例で作った以下の表ではtrタグは3つ使われているので3行になっています。列についても、thタグが4つ、tdタグが4つ×2で8か所(2行分あるため)で4列となっていますね。行が5行ならtrタグは5つ、列が7列ならth・tdタグは7つという具合に使います。作りたい表のセル数を想定してtrタグやth・tdタグを使うことで思い通りの表を作れます。