概要

<table> は表形式のデータを表示するためのタグです。 <tr> は表の行を、<td> は行内のセル（データ）を表します。 これらを組み合わせてデータを視覚的に整理します。

基本的な使い方

See the Pen <table> / <tr> / <td>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<table>
  <tr>
    <td>項目1</td>
    <td>項目2</td>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

このように <table> の中に <tr>、さらに <td> を入れて構造を作ります。

出力される内容の例

項目1 | 項目2
データ1 | データ2

役割とメリット（定義リスト形式）

データ整理

データを行と列で整形して視覚的にわかりやすく表示できます。

柔軟なデザイン

CSS を組み合わせて罫線や背景色などを自由に装飾できます。

構造化データ

検索エンジンやスクリーンリーダーにとって読みやすく、意味的に正しい表を作成可能です。

注意点

• レイアウト目的での <table> 利用は推奨されません。データ表現にのみ使いましょう。
• セルの幅や高さの調整は CSS で行うのが望ましいです。
• 見出しセルには <th> を使うとさらに意味的に正しい表になります。

まとめ

<table> / <tr> / <td> は、 データを表形式で整理・表示するための基本タグです。 正しい構造で記述し、装飾は CSS に委ねるのがモダンな使い方です。