HTMLの表タグを完全ガイド！初心者でもわかる表の使い方

新人と先輩の会話形式で理解しよう

新人

「HTMLで表を作りたいんですけど、どうすればいいですか？」

先輩

「HTMLでは、tableタグを使って表を作成することができます。表を作るためには、まずtableタグで表全体を囲んで、その中に行（trタグ）と列（tdタグ）を配置します。」

新人

「なるほど、表の中でどのように情報を整理すればいいのか、具体的に教えてもらえますか？」

先輩

「もちろんです！それでは、基本的な使い方を見てみましょう。」

1. 表を作成する基本の流れ

HTMLで表を作るためには、まずtableタグを使います。その中に、行を作成するためにtrタグを使い、各セル（データ）のためにtdタグを使います。ヘッダーが必要な場合は、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>

ブラウザ表示

上記の例では、tableタグで表全体を囲み、trタグで行を定義し、thタグで表のヘッダーを作成しています。データのセルにはtdタグを使用しています。

2. 表のデザインを整える方法

HTMLだけで表のデザインはあまり細かく設定できませんが、CSSを使うことでデザインを整えることができます。例えば、枠線を追加したり、セルの背景色を変更することができます。


<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"を使っています。これにより、表に枠線が追加されます。

3. 表のセルを結合する方法

表でセルを結合する場合、colspan属性を使って列を、rowspan属性を使って行を結合することができます。これにより、複雑な表を作成できます。


<table border="1">
  <tr>
    <th colspan="2">名前と年齢</th>
  </tr>
  <tr>
    <td rowspan="2">山田太郎</td>
    <td>25</td>
  </tr>
  <tr>
    <td>26</td>
  </tr>
</table>

ブラウザ表示

この例では、colspanを使って「名前と年齢」というヘッダーを2列に結合し、rowspanを使って「山田太郎」というセルを2行にわたって表示しています。

4. 表のアクセシビリティ向上のために

表は情報を整理するために便利ですが、視覚に頼らずに情報を提供することも大切です。captionタグを使って、表にタイトルを追加することで、画面リーダーを使用しているユーザーにも表の内容がわかりやすくなります。


<table border="1">
  <caption>社員情報</caption>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>25</td>
  </tr>
</table>

ブラウザ表示

captionタグを使うことで、表にタイトルを付けることができ、視覚に頼らずに情報を理解しやすくなります。

5. 表の構造を明確にするタグ（thead・tbody・tfoot）

HTMLの表では、thead、tbody、tfootタグを使うことで、表の構造をより明確にすることができます。これにより、コードの可読性が向上し、スタイルの適用や管理もしやすくなります。


<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>25</td>
    </tr>
    <tr>
      <td>鈴木一郎</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合計2名</td>
    </tr>
  </tfoot>
</table>

ブラウザ表示

theadはヘッダー、tbodyはデータ部分、tfootはフッターを表します。これらを使うことで、表の意味がより明確になります。

6. 表の列幅や配置を調整する方法

表の見た目を整えるために、列の幅やテキストの配置を調整することが重要です。HTMLだけでなく、CSSを併用することで、より柔軟なデザインが可能になります。


<table border="1" style="width:100%; text-align:center;">
  <tr>
    <th style="width:50%;">名前</th>
    <th style="width:50%;">年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>25</td>
  </tr>
</table>

ブラウザ表示

このようにstyle属性やCSSを使うことで、列の幅や文字の配置を自由に調整することができます。

7. レスポンシブ対応の表を作る方法

スマートフォンなどの小さい画面でも見やすい表を作るためには、レスポンシブ対応が重要です。表をスクロール可能にすることで、レイアウト崩れを防ぐことができます。


<div style="overflow-x:auto;">
  <table border="1">
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>山田太郎</td>
      <td>25</td>
      <td>東京都</td>
    </tr>
  </table>
</div>

ブラウザ表示

このようにoverflow-x:auto;を指定することで、画面サイズに応じて横スクロールが可能になり、スマートフォンでも見やすい表になります。