HTMLの表とは

HTMLでの表（table）の作成は、データを行と列の形式で整理して表示するために使用されます。表は、情報を比較しやすくしたり、構造化されたデータをユーザーに提供したりする際に役立ちます。

HTMLの表は、以下のタグを使用して構築できます。

• <table>: 表全体を定義するタグです。
• <tr>: “Table Row”の略で、表の行を定義します。
• <th>: “Table Header”の略で、見出しセルを定義し、通常は太字と中央揃えで表示されます。
• <td>: “Table Data”の略で、標準的なセルを定義します。

これらの要素を組み合わせて、以下のような単純な表を作成できます。

<table>
  <tr>
    <th>月</th>
    <th>売上</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>150円</td>
  </tr>
</table>

この例では、2列の表が作成され、1行目には見出しが、続く2行には月とそれに対応する売上のデータが含まれています。

表の追加の要素と属性

• <caption>: 表のタイトルや説明を提供します。<table> タグの直後に配置されることが一般的です。
• <thead>, <tbody>, <tfoot>: 表をセクションに分けるための要素です。それぞれ表のヘッダー部、本体部、フッター部を囲みます。
• colspan 属性: <th> や <td> 要素が複数の列にまたがることを指定します。
• rowspan 属性: <th> や <td> 要素が複数の行にまたがることを指定します。

複雑な表の例

<table>
  <caption>四半期売上レポート</caption>
  <thead>
    <tr>
      <th>四半期</th>
      <th>売上</th>
      <th>経費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$200</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$150</td>
      <td>$60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>$350</td>
      <td>$140</td>
    </tr>
  </tfoot>
</table>

この例では、表に四半期ごとの売上と経費が含まれ、見出し、本体、フッターがそれぞれ <thead>, <tbody>, <tfoot> によってグループ化されています。また、表にはタイトルが <caption> タグを使って付けられています。

スタイリング

CSSを使って表の見た目をカスタマイズすることができます。たとえば、セルのパディング、ボーダーのスタイル、背景色などを設定することが可能です。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

このスタイリングは、表に全幅を設定し、セル間のボーダーを合わせて、見出しに背景色を設定します。

HTMLの表は、情報を整理しやすく、ユーザーにとって理解しやすい形で提供する強力なツールです。適切なマークアップとスタイリングを用いることで、データをよりアクセスしやすく、視覚的に魅力的に表示することができます。