• Home
  • Web制作
  • 【HTML入門】tableタグを使いこなす！表作成の基礎から応用まで徹底解説

【HTML入門】tableタグを使いこなす！表作成の基礎から応用まで徹底解説

schedule
Tags: HTML

【HTML入門】tableタグを使いこなす！表作成の基礎から応用まで徹底解説

Webページで情報を整理して表示する際によく用いられるのが「表」です。HTMLでは、この表を作成するためにtableタグを使用します。

本記事では、HTMLのtableタグの使い方について、基礎から応用、そして注意点まで詳しく解説いたします。

1. 表の基本構造：table、tr、tdタグ

HTMLで表を作成する際には、以下の3つのタグが基本となります。

  • <table>：表全体を囲むタグ
  • <tr>：表の行を定義するタグ
  • <td>：表のセル（データが入る部分）を定義するタグ

これらのタグを組み合わせることで、表の構造を構築します。

例えば、以下のようなシンプルな表を作成する場合のコードは次のようになります。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

解説

  1. <table>タグで表の範囲を指定します。
  2. <tr>タグで表の行を定義します。
  3. <td>タグで各セルにデータを入力します。

2. 表の見出し：thタグ

表の見出しを作成するには、<th>タグを使用します。<th>タグは、<td>タグと同じようにセルを定義しますが、見出しとして表示される点が異なります。

例えば、先ほどの表に見出しを追加する場合、コードは以下のようになります。

<table>
  <tr>
    <th>番号</th>
    <th>値</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<th>タグを使用することで、表の見出しが明確になり、より分かりやすい表になります。

3. 表のデザイン：tableタグの属性

tableタグには、表のデザインを調整するための属性がいくつか用意されています。

代表的な属性

  • border：表の外枠線の太さを指定します。
  • cellpadding：セル内の余白を指定します。
  • cellspacing：セル間の余白を指定します。
  • width：表の幅を指定します。
  • align：表の水平方向の位置を指定します。

これらの属性を組み合わせることで、表のデザインを細かく調整することができます。

属性使用例

<table border="1" cellpadding="5" cellspacing="2" width="50%">
    <!-- 表の内容 -->
</table>

4. セルの結合：colspan属性とrowspan属性

複数のセルを結合するには、colspan属性とrowspan属性を使用します。

  • colspan：セルを水平方向に結合します。
  • rowspan：セルを垂直方向に結合します。

結合の例

<table>
  <tr>
    <th colspan="2">商品</th>
  </tr>
  <tr>
    <td>名前</td>
    <td>価格</td>
  </tr>
</table>

5. 表の応用：複雑な表の作成

tableタグと関連するタグを組み合わせることで、より複雑な表を作成することができます。例えば、表の中に別の表を入れ子にすることも可能です。

応用例：入れ子構造の表

<table>
  <tr>
    <td>商品A</td>
    <td>
        <table>
            <tr>
                <td>サイズ</td>
                <td>価格</td>
            </tr>
            <tr>
                <td>S</td>
                <td>1000円</td>
            </tr>
            <tr>
                <td>M</td>
                <td>1200円</td>
            </tr>
        </table>
    </td>
  </tr>
</table>

6. まとめ：tableタグを使いこなして分かりやすい表を作成しよう

tableタグは、HTMLにおいて表を作成するために欠かせない要素です。本記事で紹介した基本的な使い方から応用、注意点まで理解することで、様々な表を作成できるようになります。

情報を整理し、ユーザーにとって見やすく分かりやすい表を作成することで、Webページの質を高めることができます。

関連記事