HTMLで表を作成する方法を順を追って解説!1ステップずつ確認しよう!
  • facebookページ
  • twitterページ
  • 2020.06.19

    HTMLで表を作成する方法を順を追って解説!1ステップずつ確認しよう!

    HTMLで表を作成する場合、複数のタグを組み合わせて使用する必要があるため、プログラミングを始めたばかりの方にはイマイチ理解出来ていないという方もいらっしゃるかと思います。

    本記事では、HTMLでの表作成の方法をステップ毎に分かりやすく解説していきたいと思います。

    HTMLで表を作成する際の基本的な考え方


    HTMLで表を作成する場合「table」タグを使用します。

    「table」「tr」「th」「td」の4つのタグを利用して、任意の表形式を組み上げていきます。

    テーブルによって「行」や「列」の数は異なりますが、基本的な使い方を把握しておけば自由にカスタマイズすることが可能です。

    表を作成する際の考え方を順番に確認していきましょう。

    HTMLで表を作成する手順1: 表示したい行数を決める


    まずは表に対して「行」を何行表示するか決定しましょう。

    行の指定には「tr」タグを使用します。

    例えば3行の表を作成したい場合は、下記のサンプルのようになります。

    ポテパンダの一言メモ

    tableタグに関しては、表の大枠を定義するものです。
    1つの表を作成するためには必ず<table>と</table>を定義する必要があります。

    HTMLで表を作成する手順2: 見出しの位置を決める


    次に見出しの位置を決めていきましょう。

    HTMLの表作成では見出しとして「th」タグを使用します。

    1行目を見出しに設定

    1行目を見出しとしたい場合には、下記のサンプルのようになります。

    thタグを指定した数だけ見出しの列が作成されます。

    1列目を見出しに設定

    表の左端に見出しを持ってきたい場合には、下記のサンプルのように記述することで実現可能です。

    各行の最初にthタグを設置することにより、1列目を見出しとして設定することが可能です。

    HTMLで表を作成する手順3: データ部分を作成


    上述のサンプルで登場していますが、データ部分には「td」タグを使用します。

    表示したい列数分、tdタグをtrタグの内部に記述していきます。

    各行に指定するtdタグは同数で設定するのが一般的です。

    各行で列数を変更することも可能ですが、レイアウトが崩れるため、後述するセル結合以外での利用は一般的ではありません。

    ポテパンダの一言メモ

    ちなみにthタグに関しては使用しなくても問題ありません。
    データだけを表形式で表示したい場合には、「table」「tr」「td」タグのみでテーブルを作成します。

    ここまでの説明をサンプルコードで掲載すると下記のようになります。

    index.html

    ブラウザでは下記のように表示されます。

    ポテパンダの一言メモ

    tableタグは属性を指定しない場合、枠線は表示されません。
    またthタグに設定した値は太字・中央寄せで表示される特徴があります。

    HTMLで表を作成する応用編: セル同士の結合


    セル同士を結合させることで変則的な表を作成することも可能です。

    セルを横に繋げる場合「colspan属性」、セルを縦に繋げる場合「rowspan」属性を指定します。

    属性に対する値には、結合したいセルの数を指定します。

    ポテパンダの一言メモ

    今回はセル結合のサンプルと同時に、より表っぽく見えるように少しデザインを加えました。

    index.html

    style.css

    ブラウザでは下記のように表示されます。

    CSS部分についての簡単な解説

    セル結合のサンプルで設定した、デザイン部分のCSSコードについて簡単に解説していきます。

    枠線を指定

    tableタグは、デザイン指定を行わない場合、枠線が表示されないため、一見すると表のように見えません

    そこでCSS側で枠線を表示する処理を加えました。

    borderプロパティで枠線自体の設定は可能ですが、各タグに枠線が設定されることによりデフォルトでは2重線のように表示されてしまいます。

    そこで隣接するボーダーを重ねるために「border-collapse:collapse」を指定してあげることで、1重の枠線で表を囲ったように見せています。

    テーブルと各セルの幅指定

    テーブルとセルの幅指定にはwidthプロパティを使用しています。

    今回の場合、全体を400ピクセルで指定し、画面左側に表示される見出しは150ピクセル、データ用のセルは250ピクセルに固定しました。

    セル内テキストの余白を調整

    デフォルトの表示では、セル内のテキストが枠線から近すぎるように感じたため、10ピクセル分隙間を開けるように設定しています。

    thタグに記述したpaddingプロパティが役割を担います。

    また、テキストを中央揃えにしたかったため、データ用セルには「text-align:center」を指定して中央揃えするようにしました。

    ポテパンダの一言メモ

    見出しを分かりやすくするように、background-colorプロパティで背景色をダークグレイに指定しています。

    さいごに: HTMLでの表作成は順を追って確認すれば仕組みは簡単


    本記事では、HTMLでの表作成の手順について各ステップを分解して細かくご紹介してみました。

    初心者の方の中には、いきなりWebサイトの複雑なテーブルタグを分解して混乱している方も多いようですので、確実にステップを踏んで理解していきましょう。

    今回ご紹介した内容を元に、ご自身でもいくつかの表をHTMLで作成してみてください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE