【HTML】表を作成してページを見やすくさせよう！【tableタグの使い方】

HTMLでページをマークアップしていくときに、表(table)を入れることでページ全体を見やすくさせることができます。

表は、枠線をつけたり色をつけたりすることもできるので、見た目を自分好みにカスタマイズしていくこともできます。

【HTMLの表を作成するために使うタグ一覧】

「table」- 表全体のタグ
「thead」- 表の見出しタグ
「tbody」- 表の本文タグ
「tr」- 表の行タグ
「th」- 表の見出しセルタグ
「td」- 表の見出し以外に使うタグ

この記事の要点

・htmlで表の作り方

・表に枠線をつける

・表に背景色をつける

よると

今回は、HTMLで表の作成方法と使い方をまとめていきます。

HTMLの表とは？

HTMLでは以下のような表を作成することができます。

	商品A	商品B
【価格】	1,000円	1,200円
【使いやすさ】	〇	◎
【おすすめ度】	☆☆☆	☆☆☆☆

上記のようにHTMLでは、商品の比較や会社概要などの表を作ることができます。

よると

ページに表を入れることで、全体を見やすくさせることができます。

HTMLで表の作成方法

よると

以下のイメージ表を使って、表の作成方法を紹介していきます。

【作成する表のイメージ】

———————————————————————-
年　 出来事
2019 会社設立
2020 サイトリニューアル
———————————————————————-

①. 表全体は「tableタグ」、表の見出しは「theadタグ」、表の本文は「tbodyタグ」を使う。

<body>
<table>
<thead>
「年　出来事」の部分
</thead>
<tbody>
「2019 会社設立,2020 サイトリニューアル」の部分
</tbody>
</table>
</body>

・thead は「table head」の略。

・tbody は「table body」の略。

・表に見出しを付けない場合は、「theadタグ」は書かなくて良い。

②. 表の行(横の部分)は「trタグ」を使う。

<table>
<thead>
<tr>
「年　出来事」の部分
</tr>
</thead>
<tbody>
<tr>
「2019会社設立」の部分
「2020 サイトリニューアル」の部分
</tr>
</tbody>
</table>

・tr は「table row」の略。

③. 表の見出しセル(ひとマス)には「thタグ」を使う。

</tr>
</tbody>
</table>

表示のされ方

年　出来事

・th は「table header cell」の略。

④. 表の見出し以外のセルには「tdタグ」を使う。

<table>
<thead>
<tr>
<th>年</th>
<th>出来事</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019</td>
<td>会社設立</td>
</tr>
<tr>
<td>2020</td>
<td>サイトリニューアル</td>
</tr>
</tbody>
</table>

表示のされ方

年　出来事
2019 会社設立
2020 サイトリニューアル

・tdタグは「table data cell」の略。

表に「罫線・枠」をつける

年	出来事
2019	会社設立
2020	サイトリニューアル

表は「罫線・枠」を付けることもできます。

装飾をする場合は基本的にCSS側でコードを書くのですが、今回はHTML側での書き方を紹介します。

表に線(罫線)を付ける

表に線をつけるには、tableタグに属性と値を書き込みます。

罫線をつける手順

①. tableタグにstyle属性をつける

②. border-collapseプロパティに「collapse」という値をつける

③. border属性の値を「1」にする

【書き方】

<table style=”border-collapse: collapse ” border=”1″>
<thead>
<tr>
<th>表に</th>
<th>線をつける</th>
</tr>
</thead>
<tbody>
<tr>
<td>テスト</td>
<td>test</td>
</tr>
</tbody>
</table>

【表示のされ方】