表組みに使用できるタグ

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

今回は表組みに使用する「tableタグ」を覚えていきます。
見出しとデータのある表組みを作りたい時に使用すると良いでしょう。

<table>タグ、<thead>タグ、<tbody>タグ

まず、<table>タグをの間に書きます。
次に<table>タグのheadとなる<thead>タグをその間に書きます。

この<thead>タグが見出しとなる部分です。

データを記入する部分として、<table>タグのbodyとなる<tbody>タグを<thead>タグの下に書きます。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

<tr>タグ、<th>タグ

データを記入する前に<tr>タグ、<th>タグを書きます。
それぞれの場所には、名前、2010、2011の見出しが記入されています。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<table>
<thead>
<tr><th>name</th><th>2010</th><th>2011</th></tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<th></th>は見出し、<tr></tr>見出し全体を囲っているのが分かると思います。
今、記入した3つは例として、それぞれに「名前」、「売上(2010)」「売上(2011)」とします。

<td>タグ

見出しを記入したら、同じように<td>タグを<tbody><t/body>に入れます。
この<td>タグにデータを記入します。

例えばタグチさんが「売上(2010)」では200万円で、「売上(2011)」では210万円だったとした場合、@taguchi200210と記入します。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
</head>
<body>
<table>
<thead>
<tr><th>name</th><th>2010</th><th>2011</th></tr>
</thead>
<tbody>
<tr><td>@taguchi</td><td>200</td><td>210</td></tr>
<tr><td>@fkoji</td><td>300</td><td>420</td></tr>
<tr><td>@adachi</td><td>500</td><td>380</td></tr>
</tbody>
</table>
</body>
</html>
タグチさんの例と同じように、Fコジさんは「売上(2010)」では300万円で、「売上(2011)」では4200万円。
アダチさんは「売上(2010)」では500万円で、「売上(2011)」では380万円とした場合を記入しています。

まとめ


name20102011
@taguchi200210
@fkoji300420
@adachi500380
これが完成図です。
それなりに見れるものになっていると思います。

  • <tr>タグ:「table row(行)」
  • <th>タグ:「table header」
  • <td>タグ:「table data」
それぞれのタグはこのような意味をもっています。
一見複雑そうに見えますが、やっていることと言えばタグで文章を囲んでいるだけです。

それでは、今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。