HTML で 表を作成する TABLE タグの使い方

Html tag table

何かを比較するような内容をメモするときに、わかりやすくなるように、上の画像のように表組みにしたくて、HTML で表を作成する方法を覚えたつもりだけど、複数のタグを駆使していて複雑ゆえ、3日で忘れそうだから、ここにメモしておこうと思います。

使用するタグ

まずは登場人物の紹介から。

  • <table> </table> ・・・このタグで囲まれた部分が、ひとつの表になります。
  • <tr> </tr>・・・このタグで囲まれた部分が、1行になります。
  • <td> </td>・・・このタグで囲まれた部分が、セルなります。
  • <th> </th>・・・このタグは td と置き換えて使い、見出しになります。

タグの意味

意味がわかったほうが覚えやすいので、何の略かもメモしておきます。

  • tr = Table Raw
  • td = Table Data
  • th = Table Header

表を作ってみる

こんな風に書いてみました。

完成図

上記のコードで、以下のように表示されます。ちなみに、装飾はこのブログのテンプレートのCSSで設定されいるものです。見出しである th タグの部分が大文字になっているのも、CSSによるものです。一般的には、太字で中央に揃います。

The Stone Roses The Smiths
Vocal イアン・ブラウン モリッシー
Guitar ジョン・スクワイア ジョニー・マー
Bass マニ アンディ・ルーク
Drums レニ マイク・ジョイス

まとめ

複雑で HTML 初心者には、実に優しくないタグです。このメモを書いていて、使わなければ、3日と言わず、1日で忘れる自信がでてきました。

スポンサーリンク

ABOUTこの記事をかいた人

IT は、Apple、Google が特に好き。 音楽は、The Stone Roses、Johnny Marr が特に好き。 好きな飲み物は、ビール。 好きな食べ物は、ラーメン。 以上です。