HTML超入門 テーブル編

テーブルは<table>タグ、<tr>タグ、<td>タグ、を使います。

それぞれのタグの意味は以下です。

table:テーブル全体を表すタグ
tr:テーブル内の一つの行を表すタグ
td:行の中の一つのマスを表すタグ

具体的には以下のように記載します。

<table>
<tr>
<td>にんじん</td>
<td>オレンジ</td>
<td>野菜</p>
</tr>
<tr>
<td>りんご</td>
<td>レッド</td>
<td>果物</td>
</tr>
</table>

ただこれだと各列が何を意味しているかわからないため、表の最初の行を各列のタイトルにします。
表題を入れるマスには td タグではなく、thタグを使います。

以下のようになります。

<table>
<tr>
<th>名前</th>
<th>色</th>
<th>カテゴリ</th>
</tr>
<tr>
<td>にんじん</td>
<td>オレンジ</td>
<td>野菜</p>
</tr>
<tr>
<td>りんご</td>
<td>レッド</td>
<td>果物</td>
</tr>
</table>

これで、各列が何なのかわるようになりました。
表題のマスは通常のマスと比べ、文字が太くなっていたり中央揃えだったりと、見え方が変わります。

このようにしてテーブルはいくつかのタグを組み合わせて表現します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>