HTMLのテーブル

1. 要素 <table>

HTMLは、テーブルを使用してデータを構造化して表示する便利な方法を提供しています。テーブルは、データを行（row）と列（column）に整理することで、数値データ、スケジュール、価格リスト、その他の構造化データセットを表示するのに適しています。 テーブルを作成するための基本的なタグ（<table>、<tr>、<td>、<th>）の使用例を見ていきましょう。

タグ<table>はテーブル全体のコンテナとして機能します。これは、テーブルの開始と終了を示し、他のすべてのテーブル関連のタグを内包します。

<table>タグを使用したテーブル作成例:

<table>
  <!-- テーブルの行やセルがここに配置されます -->
</table>

<table>タグは、border属性を使用してテーブルに枠を追加するなど、さらにスタイルを設定できます:

<table border="1">
  <tr>
    <td>セルの例</td>
  </tr>
</table>

この例では、属性border="1"がテーブルとそのセルの周りに枠を追加し、表示可能にします。

2. 要素 <tr>

タグ<tr>は、テーブルの行（table row）を指定します。テーブルの各行は、<tr>タグ内に配置され、<table>の中に配置されます。

例:

<table border="1">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

この例では、テーブルは2行で構成され、各行には2つのセルが含まれています。

3. 要素 <td>

タグ<td>（table data）は、テーブル内でデータを持つセルを作成するために使用されます。このタグは、テーブルセルにテキスト、画像、またはその他のHTMLコンテンツを配置する一般的なテーブルセルを示します。

<td>の使用例:

<table border="1">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

<td>セルは、<tr>内に配置されるテーブルの主要な内容を作成します。

4. 要素 <th>

タグ<th>（table header）は、テーブルのヘッダーを作成するために使用されます。<th>を使用して作成されたセルは、デフォルトで太字で中央揃えになります。これは、列または行のヘッダーを示すのに便利です。

ヘッダー付きテーブルの例:

    
<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>アンナ</td>
    <td>25</td>
  </tr>
  <tr>
    <td>イワン</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>アンナ</td>
    <td>25</td>
  </tr>
  <tr>
    <td>イワン</td>
    <td>30</td>
</tr>
<table border="1">
    
  

この例では、<th>は「名前」と「年齢」のヘッダーを示すために使用され、各列のデータが何を意味するかをユーザーがすぐに理解できるようにします。