ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

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

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

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

Hiko
Hiko

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

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

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

こんな方にオススメ
  • HTML学習初心者の方
  • テーブルを作るのに苦戦している方
  • テーブルのカスタマイズを簡単にできるようになりたい方
スポンサーリンク

テーブルで作れるもの

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

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

web制作におけるテーブルで作れるもの
  • 料金表
  • 比較表
  • お問い合わせフォーム
  • 会社概要

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

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

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

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

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

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

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

Hiko
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
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
Hiko

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

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

背景色、文字色を変える

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

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

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

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

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

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

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

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

リンク
  • ポイント1
  • ポイント2
  • ポイント3

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

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

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

テーブルの作り方まとめ

ネコ君
ネコ君

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

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

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

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

タイトルとURLをコピーしました