HTML で完全な表を作成するにはどうすればよいですか?

HTMLで完全なテーブルを作成する方法

この記事では、HTMLを使ってステップバイステップでテーブルを作成する方法を学びます。テーブルは、データを行と列に整理して表示するために、Webページでよく使用されます。

HTMLで完全な表を作成するには、いくつかのタグを組み合わせて使います。基本的な構造は以下の通りです。

<table>
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1-1</td>
      <td>データ1-2</td>
      <td>データ1-3</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
      <td>データ2-3</td>
    </tr>
  </tbody>
</table>

各タグの説明:

<table>: 表の開始と終了を示すタグです。
<thead>: 表の見出し部分を定義します。
<tbody>: 表のデータ部分を定義します。
<tr>: 表の行を定義します。
<th>: 見出しセルを定義します。
<td>: データセルを定義します。

簡単な表の例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表のサンプル</title>
</head>
<body>

  <h1>果物の価格表</h1>

  <table>
    <thead>
      <tr>
        <th>果物</th>
        <th>価格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>りんご</td>
        <td>150円</td>
      </tr>
      <tr>
        <td>みかん</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>バナナ</td>
        <td>200円</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

表をより見やすくするための追加要素:

<caption>: 表にタイトルをつけることができます。
colgroup, <col>: 列のスタイルを一括設定できます。
<tfoot>: 表のフッター部分を定義します。

これらのタグを使って、様々な表を作成することができます。
必要に応じて、CSSでスタイルを適用して、より見やすく、魅力的な表に仕上げましょう。

よくある質問

Q1: テーブルに枠線を追加するにはどうすればよいですか？

A1: <table> タグに border 属性を追加し、値を指定します。例: <table border="1">

Q2: セルの幅や高さを変更するにはどうすればよいですか？

A2: <td> または <th> タグに width 属性と height 属性を追加し、値をピクセルまたはパーセンテージで指定します。例: <td width="200px">

Q3: セルの内容を中央揃えにするにはどうすればよいですか？

A3: <td> または <th> タグに align="center" 属性を追加します。左揃えにする場合は align="left" 、右揃えにする場合は align="right" を使用します。