【HTML入門】テーブルの作り方を初心者向けに解説【table,th,tr,td】

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

HTMLを使ってテーブルを（表）を作りたいけど、tabeleタグとかtr,thtdなどいっぱい使うタグがあってよく分からない！

超絶分かりやすく説明してほしい！

今回の記事では、HTML学習者の方がつまずきがちな、テーブルの作り方について解説します。

テーブルは他のHTMLタグとは違い、いろんなタグを組み合わせてできているので、理解するのにとても苦労しますよね！

Hiko

僕も初めて学習した時は理解不能でした。。。

この記事では、「読みながらコードを書くだけでマスターできる！」をモットーに、イラストや図を使いながらわかりやすく解説します！

※この記事を読みながら実際に自分のエディタにコーディングしてみましょう！

こんな方にオススメ

HTML学習初心者の方
テーブルを作るのに苦戦している方
テーブルのカスタマイズを簡単にできるようになりたい方

テーブルで作れるもの

テーブルはユーザーが情報を効率よく理解する際に主に利用されています。

テーブルはWebサイトだけでなく、料金表やタイムテーブル、カレンダーなど我々の生活の一部にも多く取り込まれています。

web制作におけるテーブルで作れるもの

料金表
比較表
お問い合わせフォーム
会社概要

主にこれらを作る際にテーブルは使用されます。

このAdobe社のホームページのテーブルを見ると分かるように、とても見やすく情報を的確に収集することができます。

行ごとに背景色を変えたり、セル（一つのマス目のこと）にリンクを設置したり、セルを結合させることも可能です。（後ほど解説）

テーブルはユーザーに情報を的確に収集させるためのもので、テーブルをカスタマイズすることによってさらにユーザビリティを高めることができる！

テーブルを作るのに必要な要素

①<table>：テーブル全体を囲むタグ。この中にその他の3つのタグを入れる
②<tr>：テーブルの列を作る際に使用
③<th>：テーブルの見出しを定義する際に使用（あっても無くてもOK）
④<td>：テーブルのデータ（このタグの中に<a>や<img>も挿入可）

テーブルは主にこの4つのタグを用いて作られています。

Hiko

実際に手を動かしてこの見本通りのテーブルを作ってみましょう！

tableタグでテーブルの枠を作る

<table class="pricelist">

</table>

まず始めにtableタグを書きます。

この中に<tr><th><td>を書いていきます。

classにはそのテーブルが何のテーブルか分かるようなclassを付けるといいですね！

trタグで列を作る


<table class="pricelist">
 <tr></tr>
 <tr></tr>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

次にテーブルの列（横の一列）を作っていきます。

列を作るには<tr>タグを使います。

<tr></tr>と書くと1列できて、この場合だと5つあるので5列ができます。

thタグでテーブルの見出しを作る

<table class="pricelist">
 <tr>
   <th>　</th>
   <th>料金</th>
   <th>サービス</th>
   <th>経歴</th>
 </tr>
 <tr>
   <th>A社</th>
 </tr>
 <tr>
   <th>B社</th>
 </tr>
 <tr>
   <th>C社</th>
 </tr>
 <tr></tr>
</table>

	料金	サービス	経歴
A社
B社
C社

次にテーブルの見出しを<th>を使って作っていきます。

一列目に関しては見出しが「空白」「料金」「サービス」「経歴」の3つがあるので、1つ目の<tr>タグの中に<th>を4つ書けばいいですね！

次に「A社」「B社」「C社」に関しては2~4列目に位置しているので、それぞれの<tr>に一つずつ<th>を書いてあげるといいでしょう！

tdタグでテーブルのデータを作る

<table class="pricelist">
 <tr>
   <th>　</th>
   <th>料金</th>
   <th>サービス</th>
   <th>経歴</th>
 </tr>
 <tr>
   <th>A社</th>
   <td>1,000円</td>
   <td>△</td>
   <td>10年</td>
 </tr>
 <tr>
   <th>B社</th>
   <td>2,000円</td>
   <td>◯</td>
   <td>4年</td>
 </tr>
 <tr>
   <th>C社</th>
   <td>3,000円</td>
   <td>×</td>
   <td>1年</td>
 </tr>
 <tr>
   <td>結果：B社が最もいい</td>
 </tr>
</table>

	料金	サービス	経歴
A社	1,000円	△	10年
B社	2,000円	◯	4年
C社	3,000円	×	1年
結果：B社が最もいい

最後に<td>タグを使用して「1,000円」「10年」などのテーブルデータを書いていきます。

ここでポイントですが、一つのデータ（セル）に対して<td>を一つ使うようにしましょう！

ネコ君

あれ？完成形と全然違うけど。。。

Hiko

テーブルを綺麗に整えるにはCSSでスタイリングしていきます！

よく使うテーブルのスタイリングをご紹介しますね！

テーブルの使えるデザイン

HTMLだけでテーブルを作ることはできますが、間隔を調整したり、ヘッダーを分かりやすく色つけしたりCSSでスタイリングする必要があります。

セルを結合させる

先ほど一緒に作ったテーブルですが、5列目の「結果：B社が最もいい」のセルが不自然ですね！

1~4行目までをセル結合して文字を中央揃えしてあげると綺麗に見えるでしょう！

<td colspan="4" class="center">結果：B社が最もいい</td>

このように書いてあげるとセル結合することができます。

.center{
text-align:center;
}

ついでにテキストを中央揃えにしておきましょう！

	料金	サービス	経歴
A社	1,000円	△	10年
B社	2,000円	◯	4年
C社	3,000円	×	1年
結果：B社が最もいい

colspan=”横に繋げたい数”
rowspan=”縦に繋げたい数”

どの方向にセルを結合するかによって変わってくるので、しっかり抑えておきましょう！

テーブルの余白を調整する

完成形と比べると、セルの高さが短い気がしますね！

セルの大きさや余白を調整するにはCSSのpaddingを設定します。

padding-top：上の余白
padding-right：右の余白
padding-bottom：下の余白
padding-left：左の余白

th, td{
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
}
th, td{
padding:10px 20px; 
}

それぞれの値を指定してもいいですが、「padding:10px 20px」でまとめて書くこともできます。

	料金	サービス	経歴
A社	1,000円	△	10年
B社	2,000円	◯	4年
C社	3,000円	×	1年
結果：B社が最もいい

Hiko

いよいよ完成が見えてきましたね！

あとは背景色、文字色を指定して完成です！

背景色、文字色を変える

見出しの部分と、データのセルで色分けがされているとユーザーは見やすいですね！

CSSを使って背景色と、文字の色を変えてみましょう！

th{
background:#191970;
color:#fff;
}
td{
background:#DCDCDC;
}

背景色は自分好みにカスタマイズしてみて下さい！

	料金	サービス	経歴
A社	1,000円	△	10年
B社	2,000円	◯	4年
C社	3,000円	×	1年
結果：B社が最もいい

こんなところでしょうか！！

テーブルにリンクや画像を挿入する

テーブルの中にリンクを入れたり、画像を入れたい時も出てくることでしょう。

テーブルの中でよく使われそうなものをまとめてみました！

お問い合わせフォームを作る際には、テーブルの中に<input>やセレクトボックスを入れたりするので、慣れておきましょう！

テーブルの中に<img>や<a>タグを入れる場合は、必ず<td>タグの中に書くようにしましょう！

テーブルの作り方まとめ

ネコ君

一つ一つのタグの意味を理解しておけば簡単にテーブルを作ることができるね！

tableタグのおさらい

<table>でテーブルの枠を作る
<tr>でテーブルの列を作る
<th>でテーブルの見出しを作る
<td>でテーブルのデータを作る
colspan=”結合させる数”で横にセルが結合する
rowspan=”結合させる数”で縦にセルが結合する
セルの余白はpaddingで調節する
背景色を変えるとみやすいテーブルになる
セルの中にリンクや画像も入れることができる

いかがでしたでしょうか！

慣れないうちは作るのが難しいテーブルですが、この記事を参考に作れるように慣ればと思います！

もし参考になった、と思ったらシェアお願いします！

最後までご覧いただきありがとうございました！

HikoPro

IT・テクノロジーで生活と仕事をもっと豊かに