今回は、HTMLでテーブルを作成する方法について学びましょう。テーブルは、データを整理して見やすく表示するのにとても便利です。基本的なタグとその使い方を紹介します。

基本的なテーブルの構造

HTMLでテーブルを作成するには、<table>タグを使います。テーブルは、行（<tr>タグ）とセル（<td>タグ）で構成されます。また、見出しセルには<th>タグを使います。

基本的なテーブルの例

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>18</td>
    <td>男性</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>17</td>
    <td>女性</td>
  </tr>
</table>

この例では、「名前」「年齢」「性別」の見出しがあり、その下に「山田」「佐藤」のデータが表示されます。

テーブルに枠線を追加する

テーブルに枠線を追加するには、CSSを使います。以下のように<style>タグを使ってテーブルにスタイルを適用します。

枠線を追加する例

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>18</td>
    <td>男性</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>17</td>
    <td>女性</td>
  </tr>
</table>

このスタイルを適用すると、テーブル全体に1pxの黒い枠線が追加され、セルの内側に10pxのパディングが追加されます。

テーブルの見出しを中央揃えにする

見出しセルを中央揃えにするには、CSSのtext-alignプロパティを使用します。

見出しを中央揃えにする例

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
  th {
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>18</td>
    <td>男性</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>17</td>
    <td>女性</td>
  </tr>
</table>

このスタイルを適用すると、見出しセルのテキストが中央揃えになります。

テーブルの背景色を変更する

セルの背景色を変更するには、CSSのbackground-colorプロパティを使用します。

背景色を変更する例

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
  th {
    text-align: center;
    background-color: lightgray;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>18</td>
    <td>男性</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>17</td>
    <td>女性</td>
  </tr>
</table>

このスタイルを適用すると、見出しセルの背景色がライトグレーになり、偶数行の背景色が薄いグレーになります。

まとめ

今回は、HTMLでテーブルを作成する方法について学びました。基本的なタグを使って、データを整理して見やすく表示することができます。