HTMLで表を作成するタグはどれですか？

HTMLで表を作成するタグ

HTMLで表を作成するには、主に4つのタグを使用します。これらのタグを組み合わせて、行、列、ヘッダーなどを定義し、表構造を作っていきます。以下に、それぞれのタグとその役割、使用方法を具体例を交えて解説していきます。

主要な表タグ

  • <table>: 表全体の範囲を定義するタグです。このタグで囲まれた部分が表として認識されます。
  • <tr>: 表の行（横方向の並び）を定義するタグです。表は複数の行で構成されます。
  • <th>: 表のヘッダーセルを定義するタグです。ヘッダーセルは、通常、行や列の見出しとして使用され、太字で表示されます。
  • <td>: 表のデータセルを定義するタグです。データセルには、テキスト、画像、リンクなど、様々なコンテンツを入れることができます。

タグの使い方と例

これらのタグを使って、実際に簡単な表を作成してみましょう。例えば、以下のような表を作成する場合を考えてみます。

名前 年齢 出身地
田中太郎 30 東京都
佐藤花子 25 大阪府

この表を作成するためのHTMLコードは以下のようになります。


<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>出身地</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中太郎</td>
      <td>30</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25</td>
      <td>大阪府</td>
    </tr>
  </tbody>
</table>

上記のように、<table>タグで表全体を囲み、その中に<tr>タグで各行を定義します。ヘッダー行は<thead>タグで囲み、<th>タグでヘッダーセルを作成します。データ行は<tbody>タグで囲み、<td>タグでデータセルを作成します。

関連Q&A

  1. Q: 表のセルを結合することはできますか？

    A: はい、<td>タグと<th>タグでは、colspan属性で横方向に、rowspan属性で縦方向にセルを結合することができます。

  2. Q: 表に罫線を付けるにはどうすればいいですか？

    A: 以前はborder属性を使用していましたが、現在はCSSで装飾することが推奨されています。<table>タグ、<td>タグ、<th>タグなどにスタイルを適用することで罫線を自由に変更できます。

  3. Q: 表の幅や高さはどうやって指定しますか？

    A: こちらもCSSで指定することが推奨されています。widthプロパティで幅を、heightプロパティで高さを指定します。pxや%などの単位を使って指定することができます。