プログラミング

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

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

 

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

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

 

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

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

 

この記事の要点

・htmlで表の作り方

・表に枠線をつける

・表に背景色をつける

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

HTMLの表とは?

HTMLの表とは?

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

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

 

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

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

 

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タグ」を使う。

<table>
<thead>
<tr>
<th></th>
<th>出来事</th>
</tr>
</thead>
<tbody>
<tr>

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

【表示のされ方】

表に 線をつける
テスト test

 

「style=”border-collapse: collapse」を書かずに<table  border=”1″>だけ書くと、2重の枠線になります。

・border属性の値の数値を上げていくと、線の太さが変わります。(1以上から)

・数値0だと、枠線が消えます。

 

表の背景色を変える

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

 

 

表は、色を付けて見栄え良くすることもできます。

表の背景色を変えたい場合は、以下の要素に「bgcolor属性」で好きな色を指定します。

table要素 : (表全体)

tr要素 : (行)

th要素 : (見出しセル)

td要素 : (本文セル)

 

表全体の背景色を変える

<table bgcolor=”#ffffef”> /*変えたい色*/
<tr>
<th>表に</th>
<th>色を付ける</th>
</tr>
<tr>
<td>テスト</td>
<td>test</td>
</tr>
</table>

【表示のされ方】

表に 線をつける
テスト test

 

行の背景色を変える

<table>
<tr bgcolor=”#ffffef”>  /*変えたい色*/
<th>表に</th>
<th>色を付ける</th>
</tr>
<tr>
<td>テスト</td>
<td>test</td>
</tr>
</table>

【表示のされ方】

表に 線をつける
テスト test

 

セル単位で背景色を変える

<table>
<tr>
<th>表に</th>
<th>色を付ける</th>
</tr>
<tr>
<td bgcolor=”#ffffef”>テスト</td> /*変えたい色*/
<td>test</td>
</tr>
</table>

【表示のされ方】

表に 線をつける
テスト test

 

枠線の色を変える

<table border=”1″ bordercolor=”f21347″>  /*変えたい色*/
<tr>
<th>表に</th>
<th>色を付ける</th>
</tr>
<tr>
<td>テスト</td>
<td>test</td>
</tr>
</table>

【表示のされ方】

表に 線をつける
テスト test

 

表を使ってページを見やすくさせよう!【まとめ】

表を使ってページを見やすくさせよう!【まとめ】

【表の作成に必要なものまとめ】

  • 全体には「tableタグ」
  • 見出しには「theadタグ」
  • 本文には「tbodyタグ」
  • 行には「trタグ」
  • 見出しセルには「thタグ」
  • 見出し以外のセルには「tdタグ」
よると
よると
表は、文章の合間に解説として使ったり、データなどをまとめる際に使ったりすると、良い感じに見やすいページを作っていくことができると思います。

 

今回はHTML側で表のデザインを変えていきましたが、装飾を変える場合は基本的にCSS側で見た目のデザインを変えていくようにします。

HTMLでページを作成するときは表を上手く使い、ユーザー側に読みやすいページを作ることを心がけていきましょう!