HTMLで表の作り方とは?基本的な使い方を把握しよう!
  • facebookページ
  • twitterページ
  • 2020.06.19

    HTMLで表の作り方とは?基本的な使い方を把握しよう!

    HTMLでWebページを作成する際、商品の比較や一覧表示として表(テーブル)を利用したいといった要望は頻繁に挙がります。

    本記事では、HTMLで表を作る方法から基本的な使い方、簡単なデザインのやり方までを網羅的にご紹介していきたいと思います。

    HTMLで表の作り方とは?


    HTMLで表を作る際、「table」タグを使用します。

    正確にいうと「table」「tr」「th」「td」の4つのタグを組み合わせて表を作成していきます。

    tableタグ

    tableタグの役割としては、表の基本となる大枠を構成するために使用されます。
    後述する「tr」「th」「td」タグの組み合わせ方によって、様々な形式の表を作成することが可能です。

    trタグ

    trタグの役割としては、表の行を定義するために使用されます。

    「table row」タグの略称です。

    trタグがtableタグの中にいくつ定義されているかによって、表の行数が確定します。

    上記の例では3行の表が表示されます。

    thタグ

    thタグの役割としては、表の見出しを定義するために使用されます。

    「table header」タグの略称です。

    上記の例では、2行の表が作成され、1行目に3列の見出しが表示されます。

    tdタグ

    tdタグの役割としては、表の中に実際のデータを設定するために使用されます。

    「table data」タグの略称です。

    表の目的によって、テキストだけでなく、数値や画像といった様々なデータが設定されます。

    HTMLでの表作成をサンプルコードで確認しよう


    では実際にHTMLでの表作成をサンプルコードで確認してみましょう。

    属性指定なしのシンプルな表サンプル

    まずは属性を一切指定せずに、シンプルな表を作成して基本的な使い方を確認していきたいと思います。

    index.html

    ブラウザで表示した結果が下記の通りです。

    属性を指定しない場合、一見表には見えないようなデザインで表示されていますね。

    属性指定ありのシンプルな表サンプル

    次に、よくWebサイトで見られるような表の形式になるよう、タグに属性を加えて修正してみましょう。

    index.html

    ブラウザで表示した結果が下記の通りです。

    tableタグにborder属性を指定し、枠線を表示させています。

    また、tdタグのrowspan属性を使用してセルを結合するサンプルも合わせて取り入れています。

    ポテパンダの一言メモ

    rowspan属性では縦方向にセルを結合することが可能です。
    colspan属性を使用すれば横方向にセルを結合することも可能です。

    HTML5基準に沿って表のデザインを変更してみよう


    HTML5基準では、デザインに関する記述は外部CSSファイルとして記述することが推奨されています。

    実際に上述したサンプルをCSSに切り分けてコーディングするとどのような書き方になるのか確認していきましょう。

    CSSファイルにデザイン処理を記述するサンプルコード

    外部CSSファイルとして「style.css」ファイルを定義して、デザイン部分の切り出しを行ったサンプルが下記のコードです。

    index.html

    style.css

    ブラウザで表示した結果が下記の通りです。

    HTMLタグの属性で指定した場合と同じように表示されていることをご確認頂けます。

    td属性に指定したrowspan属性に関しては、CSSで置き換えるのは一般的ではないため、上述のサンプルと同様の記述としています。

    ポテパンダの一言メモ

    今回はCSSファイルにHTMLタグを直接指定してデザインを記述していますが、特定のHTMLタグにデザインを施したい場合にはid属性やclass属性を定義してデザインを実装してください。

    さいごに:HTMLで表(テーブル)作成処理は頻出処理の1つ


    本記事では、HTMLで表(テーブル)を表示する方法と基本的な使い方についてご紹介してきました。

    今回ご紹介した内容は基本中の基本となる部分で、ここからデザインを追加したり、表示する内容をデータベースから取得するなど、実務では様々な応用技術を組み合わせてWebサイトに表示する表を作成していきます。

    まずは今回ご紹介した基本を抑えて頂き、HTMLで表を表示する方法の根幹知識を身につけ、各種応用技術と組み合わせて様々な表に関する処理を実装出来るように、挑戦していきましょう。



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

    この記事をシェア

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









    ABOUT US

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

    READ MORE