tableタグの使い方と表データを適切に整理・表示する方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

tableの概要

表（テーブル）を作成する HTMLタグ

<table><tr><td>データ</td></tr></table>

概要 tableタグは、データを表形式で表示するためのHTMLタグです。行（tr）と列（tdやth）を組み合わせて表を作成します。
  • データを行と列で整理して表示できる。
  • trタグで行を定義し、tdタグでセルを定義する。
  • 見出しにはthタグを使用し、データの可読性を向上させる。
  • 表に関するタグには、table、tr、th、td、thead、tbody、tfoot、captionがある。

tableタグの基本的な使い方

以下の例では、tableタグを使って基本的な表を作成しています。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>30</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>25</td>
        <td>デザイナー</td>
    </tr>
</table>

実行例：

名前 年齢 職業
田中 30 エンジニア
佐藤 25 デザイナー

tableタグの応用：セルの結合

colspanやrowspan属性を使うことで、セルの結合が可能です。

<table border="1">
    <tr>
        <th colspan="2">氏名</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>一郎</td>
        <td>30</td>
    </tr>
</table>

実行例：

氏名 年齢
田中 一郎 30

注意事項

  • 表のレイアウトを調整するには、border-collapseやpaddingを適用すると良い。
  • 行見出しにはthタグを使用すると、表の可読性が向上する。
  • 幅を調整する場合、CSSのwidthプロパティを活用すると柔軟に変更できる。
  • テーブルレイアウトを使ったページデザインは非推奨であり、CSSのflexboxやgridを利用するのが望ましい。

よくある質問

Q: tableタグの中に画像やリンクを入れることはできますか？
A: はい、tdタグ内にimgやaタグを入れることができます。
Q: thタグとtdタグの違いは？
A: thタグは見出し用で、デフォルトで太字になります。tdタグはデータを表します。
Q: セルの幅を固定するには？
A: tdやthにwidth属性を指定するか、CSSのwidthプロパティを使います。
Q: テーブルの背景色を変更するには？
A: thやtdにCSSのbackground-colorプロパティを適用します。
Q: テーブルをレスポンシブにする方法は？
A: overflow-x: auto;を設定したdivでテーブルを囲むと、横スクロール可能になります。

まとめ

  • tableタグは、データを表形式で表示するためのタグ。
  • 行はtrタグ、セルはtdタグで定義する。
  • 見出しにはthタグを使うと可読性が向上する。
  • CSSでデザインをカスタマイズすると、より見やすくなる。
スポンサーリンク