【HTML入門】tableの書き方

こう言った疑問に答えていきます。
本日の内容は下記です。

• tableとは？
• tableの書き方
• CSSを使ったtableの装飾

よくメニュー表などで使われる<table>タグですが、一見難しそうに見えてすごく簡単です。
本記事では、この「<table>タグの書き方」についてわかりやすく解説していきます。HTMLの<table>タグを理解できれば、「Bootstrap」を使ったtableも簡単に書けるようになります！

では早速やっていきましょう！

tableとは？

そもそもtableとは何かと言うと、Webサイトでメニュー表などの表を作成したい時に使用するタグのことを言います。
Excelをイメージするとすごくわかりやすく、あの列や行をHTMLで書いていくイメージになります。

では早速「tableの書き方」について見ていきましょう！

tableの書き方

tableの書き方は下のように書いていきます。

<table>
  <tr>
    <th>テーブルヘッダー</th><th>テーブルヘッダー</th><th>テーブルヘッダー</th>
  </tr>

  <tr>
    <td>テーブルデータ</td><td>テーブルデータ</td><td>テーブルデータ</td>
  </tr>

  <tr>
    <td>テーブルデータ</td><td>テーブルデータ</td><td>テーブルデータ</td>
  </tr>
</table>

ではそれぞれのタグについて説明していきます。

タグの説明

<table>タグ

テーブルを作成する時は、まず始めに<table>タグで全体を囲みます。
<table>タグで囲むことで「テーブルを表しています」と言う意味になります。

<table>

</table>

<tr>タグ

<tr>タグは、table rowの略で行を表わすタグになります。
この<tr>タグの数だけ、テーブルの行が増えていきます。
今回の場合だと、3行のテーブルを作りたいので、<tr>タグが3つになります。

<table>
  <tr>

  </tr>

  <tr>

  </tr>

  <tr>

  </tr>
</table>

<th>タグ

<th>タグは、table headerの略で、テーブルのヘッダー部分を表わすタグになります。
テーブルの中で、列のタイトルになる部分を<th>タグで囲っていきます。
<th>タグを指定すると、自動的にフォントの太さが太くなります。

<table>
  <tr>
    <th>テーブルヘッダー</th><th>テーブルヘッダー</th><th>テーブルヘッダー</th>
  </tr>

  <tr>

  </tr>

  <tr>

  </tr>
</table>

<td>タグ

最後に<td>タグは、table dateの略で、セルの内容を表わすタグになります。
それぞれの行に、テーブルのデータとなる内容を書いてきます。
先ほど説明した<th>の数だけ<td>タグを書いていきます。

<table>
  <tr>
    <th>テーブルヘッダー</th><th>テーブルヘッダー</th><th>テーブルヘッダー</th>
  </tr>

  <tr>
    <td>テーブルデータ</td><td>テーブルデータ</td><td>テーブルデータ</td>
  </tr>

  <tr>
    <td>テーブルデータ</td><td>テーブルデータ</td><td>テーブルデータ</td>
  </tr>
</table>

これでタグの説明は以上になります。
一度ブラウザで確認してみましょう！

今のままだとテーブルっぽく並んではいるものの、線がないので完璧にテーブルとは言えません。
この線を表示させるためには、CSSを使って線を表示させていきます。

CSSを使ったtableの装飾

線をつけるためには、CSSのborderを使って表示していきます。
CSSのborderについてまだわからない方は、こちらをご覧ください。

まずは、CSSでtableの線をどのように表示させるかを決めていきます。
ここで使用するのが、「border-collapse」プロパティです。
表示方法は2種類あって、「セルごとに線を引く」か「セルとセルの間を1本でまとめる」かの2つです。「セルごとに線を引く」場合は「separate」、「セルとセルの間を1本でまとめる」場合は「collapse」を指定します。

✅セルごとに線を引く「separate」

✅セルとセルの間を1本でまとめる「collapse」

通常はセルとセルの間を1本でまとめる「collapse」を使うので、ここでも「collapse」を指定していきます。
書き方は 、<table>タグに対して「border-collapse」を指定し、値を「collapse」にしていきます。

table{
  border-collapse: collapse;
}

あとは線の太さ、線の種類、線の色を「borderプロパティ」で、<th>タグと<td>タグに指定していくだけです。

table{
  border-collapse: collapse;
}

th, td{
  border: 1px solid black;
}

ではブラウザで確認してみましょう！

これでようやくテーブルっぽくなりましたね。
このようにして、テーブルを作成していきます！

まとめ

テーブルはよくメニュー表などに使われることが多いので、覚えておきましょう！
また冒頭で紹介した「Bootstrapのtableの書き方」もすぐ書けるようになるかと思うので、よければチャレンジして見てください。

では本日は以上になります。