<table>タグについて

<table>とは？

<table>タグは、HTMLで表（テーブル）を作成するためのタグです。
表は複数の行と列から構成され、データの整理・比較・一覧表示などに用いられます。

基本構文

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>
  

主な構成タグ

• <table>：表全体を囲むタグ
• <tr>（table row）：行を表す
• <th>（table header）：見出しセル（太字＋中央揃え）
• <td>（table data）：通常のデータセル

使用例

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>25</td>
  </tr>
  <tr>
    <td>鈴木</td>
    <td>30</td>
  </tr>
</table>
  

表の属性（HTML4以前で使用）

• border：枠線の太さ（例：border="1"）
• cellpadding：セル内の余白
• cellspacing：セル間の間隔

※これらの属性は現在ではCSSで指定するのが主流です。

CSSによるスタイル例

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f0f0f0;
}
  

行・列の結合

• colspan="2"：列を横に結合
• rowspan="2"：行を縦に結合

<td colspan="2">2列分のセル</td>
  

注意点

• <table>は構造が複雑になりがちなので、整形しやすいコードを書く
• 意味のない表は避け、構造的に整理された情報に使用
• 見出しセル（<th>）を使うと、視認性やアクセシビリティが向上

まとめ

• <table>はデータを表形式で表示するタグ
• <tr>で行、<th>と<td>でセルを表す
• 構造が明確な情報に適している
• 装飾やレイアウトはCSSで行うのが基本