更新日: 2017年7月8日
公開日: 2017年7月6日

【HTML初心者向け】テーブル（table）の最も簡単な使い方 

HTMLを使って表を作りたいと思ったことはありませんか？HTMLのテーブル(table)を使えば、非常に見やすい表を作ることができます。

今回は、初心者の方にもわかりやすくテーブルの使い方をご紹介しましょう。

テーブルとは何か？
テーブルの構造
テーブル作成に使われる４つのタグ【基本編】
tableタグ
tr タグ
th タグ
td タグ
テーブル作成に使われるタグ【応用編】
```<thead>```タグ
```<tbody>```タグ
```<tfoot>```タグ
テーブル幅を変更する方法
縦、横方向に結合するcolspan属性
まとめ

テーブルとは何か？

そもそも、テーブルとは何のことでしょう？テーブルとはHTMLタグの1つで、表を作るために使われます

テーブルを使ってどのような表が作ることができるかサンプルを見てみてください。

このように、エクセルで作るようなテーブルを作ることができます。

ワクワクしてきましたか？それでは、一緒にテーブルの作成方法を詳しく見ていきましょう。

テーブルの構造

テーブルを作成するためには、テーブルがどのような構造になっているのかをまず学んでおきましょう。テーブルは、以下の要素からできています。

「見出し」（ピンク色）

表を作成する際、カテゴリーや題名として使われます。例の場合は、「チーム名」と「得点」が当てはまります。

「行」（青色）

その名の通り、横一列に並んだデータのことを指します。ここでは、それぞれの行に、各チーム名と得点が表記されていますね。

「列」（黄色）

列には、同じカテゴリーのデータが格納されます。

「セル」（緑色）

各マスのことを「セル」と呼びます。このセルの中に、各データの値が入ります。

それでは、次にテーブルをHTMLで作るためのタグを見ていきましょう。

テーブル作成に使われる４つのタグ【基本編】

HTMLで表を作る際は、見出しと行を使って作っていきます。テーブルを作るための基本のタグは４つ。それでは、テーブルを作る際のそれぞれのタグを紹介していきますね。

tableタグ

テーブルを指定するタグです。表に使う要素は、<table>タグで囲います。

tr タグ

テーブルの行を指定するタグ。テーブルの中の横一列のデータを指します。このタグの中に、各データを入れるセルタグが入ります。

th タグ

trで指定する最初の行に、見出しを指定するために使われるタグ。見出しとデータは分けて表記されます。

td タグ

セルを指定するのが、<td>タグ。表の中に入れるデータを入れる場所です。

さて、実際にHTMLファイルに記述するとどうなるのか、サンプルを見てみてください。

それぞれのタグがどのように使われているの確認してみてくださいね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
<table>

<tr>
<th>
チーム名
</th>
<th>
得点数
</th>
</tr>

<tr>
<td>
チーム１
</td>
<td>
50点
</td>

</tr>
<td>
チーム２
</td>
<td>
100点
</td>
</tr>

</body>
</html>

さて、このサンプルコードで記述したHTMLファイルはどのようにブラウザに表示されるのでしょうか。確認してみます。

ちゃんと表として表示されていますね！

テーブル作成に使われるタグ【応用編】

基本的な表を作るためのタグは下記の通り。でも、まだ他にも表を作る際に便利なタグがあるので紹介していきます。

`<thead>`タグ

テーブルのヘッダ部分を指します。

`<tbody>`タグ

テーブルのボディを指します。

`<tfoot>`タグ

テーブルのフッター部分を指します。

この３つのタグを使えば、ウェブサイトの構造のように「ヘッダー」「ボディ」「フッター」のカテゴリー分けした表を作ることが可能です。

文字だけで説明するとわかりにくいかと思うので、サンプルを見てみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
チーム名
</th>
<th>
得点数
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
チーム１
</td>
<td>
50点
</td>

</tr>
<td>
チーム２
</td>
<td>
100点
</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>
合計
</td>
<td>
150点
</td>
</tfoot>

</body>
</html>

見出しの部分を<thead> に、各チームとその得点の情報は、<tbody> に入れました。そして、<tfoot> を新しく作成。ここに、データの合計を記入しています。

<thead><tbody><tfoot> を追加することで、テーブルの構造がより一層わかりやすくなりました。

ブラウザではどのように表示されるのか見てみましょう。

しっかりとフッター部分の情報が追加されていますね！<thead><tbody><tfoot> は追加しなくても、表を作ることは可能です。しかし、追加しておくと、自分で後から編集する場合や第三者がコードする際の理解に役立ちます。

テーブル幅を変更する方法

サンプルとして使っているこちらの表ですが、もう少しセルの幅が広くできたらもっと見やすくなると思いませんか？

こちらの設定には、テーブルのタグ<table> を使っていきます。現在、<table> のタグには、表を枠線で囲むための border=“1” 属性が付け加えられています。

ここに、テーブルの幅を指定する属性を追加しましょう。幅を指定する属性は、 width=“400” と記述します。

実際にサンプルコードに追加して見ましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
<table width="400" border="1">
<tr>
<th>
チーム名
</th>
<th>
得点数
</th>
</tr>

<tr>
<td>
チーム１
</td>
<td>
50点
</td>
</tr>

<tr>
<td>
チーム２
</td>
<td>
100点
</td>
</tr>

<tr>
<td>
合計
</td>
<td>
150点
</td>
</table>

</body>
</html>

<table> のタグの中に、widthとborder属性を入れています。ブラウザはちゃんと表示されているでしょうか。確認してみましょう。

しっかりと表示されています。セルの幅が広くなって、表が見やすくなりました！widthに入れるピクセル数を変更して、場面に応じてセルの幅を変更して見てください。

縦、横方向に結合するcolspan属性

エクセルで「セルの結合」をする場面、結構ありませんか？HTMLのテーブルでも、セルの結合をすることができます。

セルの結合をさせるために使われるのは、colspanという属性。先ほど紹介したwidthと同じように、タグの中に属性を指定して使用します。

colspanが使われるのは、セルを結合したい「セル（ <td> )」内です。２つのセルを１つに結合したい場合、

<td colspan=“2>

と表記します。

サンプルを使って、どのように表示されるのか確認していきましょう。

まずは、サンプルコードから。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
<table width="400" border="1">
<tr>
<th>
チーム名
</th>
<th>
得点数
</th>
</tr>

<tr>
<td>
チーム１
</td>
<td>
50点
</td>
</tr>

<tr>
<td>
チーム２
</td>
<td>
100点
</td>
</tr>

<tr>
<td colspan="2">
セルの結合
</td>
</table>

</body>
</html>

最後の行に、colspan属性をつけたtdタグを入れました。これで、２つ分のセル内に、データが表示されるはず。

ブラウザで確認してみます。