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




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


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

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

目次
  1. テーブルとは何か?
  2. テーブルの構造
  3. テーブル作成に使われる4つのタグ【基本編】
  4. tableタグ
  5. tr タグ
  6. th タグ
  7. td タグ
  8. テーブル作成に使われるタグ【応用編】
  9. ```<thead>```タグ
  10. ```<tbody>```タグ
  11. ```<tfoot>```タグ
  12. テーブル幅を変更する方法
  13. 縦、横方向に結合するcolspan属性
  14. まとめ


テーブルとは何か?

image

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

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

image

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

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

テーブルの構造

image

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

image

  • 「見出し」(ピンク色)

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

  • 「行」(青色)

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

  • 「列」(黄色)

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

  • 「セル」(緑色)

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

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

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

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

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>
チーム1
</td>
<td>
50点
</td>

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

</body>
</html>

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

image

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

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

image

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

<thead>タグ

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

<tbody>タグ

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

<tfoot>タグ

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

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

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

<!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>
チーム1
</td>
<td>
50点
</td>

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

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

</body>
</html>

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

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

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

image

しっかりとフッター部分の情報が追加されていますね!<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>
チーム1
</td>
<td>
50点
</td>
</tr>

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

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

</body>
</html>

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

image

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

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

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

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

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

<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>
チーム1
</td>
<td>
50点
</td>
</tr>

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

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

</body>
</html>

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

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

image

ちゃんとセルが結合されています!colspanの数字を変えれば、その数で指定したセルの文だけセルが結合されます。

ちなみに、テーブル内の列以上の数を指定しても、セルの数を増やすことはできないので注意してくださいね。例えば、今回のサンプルでいうと、テーブルの数は2つなので、2つ以上の数を指定しても、ブラウザには反映されません。

まとめ


image  今回は、テーブルを作成するために使われるタグを紹介しました。テーブルは、一見作るのが難しそうに見えますが、タグの役割が理解できれば簡単に作ることができます。

今回紹介したタグを使って、ぜひご自身でも表を作って見てくださいね。

ここでは、セルの結合やセルの幅の変更方法を紹介しましたが、他にもテーブル作成に使える属性があるので、表をさらにカスタマイズしたい場合は、こちらもチェックしてみてください。

image

Ayumi
この記事を書いた人
Ayumi
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp