HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEWebHTML5HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。初心者向けこの記事では、HTMLのテーブルについて基本的な使い方と簡単なカスタマイズの方法を紹介する。テーブルはHTML内に表を表示したいときに使用される。表は情報を直感的に分かりやすくまとめることが出来るので便利で使用頻度も高い。この記事は特に以下のような人たちを対象にしている。HTMLの知識はあまり無いがHTMLファイルで表を使いたい。自身のブログで使用している表をカッコよくカスタマイズしたい。企業サイトで使用している表をレスポンシブ対応させたい。使いこなせるようになってほしい。表を縦並びに変更するHTMLテーブルとは?HTMLテーブルはHTML内で表を使用するためのコンポーネント。テーブルはHTMLファイル内で<table>タグを用いることによって使用できる。テーブルは複数の行と列から構成される。大きくヘッダー・データ・フッターの3つに分類することができる。ひとつひとつのデータを入力する欄をセルと呼ぶ。エクセルの表を思い浮かべてもらえれば、想像しやすいかもしれない。CodePen.HTMLテーブルの使い方では、テーブルの使い方を確認していこう。テーブルを使用するテーブルを使用するにはHTMLにて<table>タグを使用する。<table></table>テーブルのレイアウト(th・td)HTMLテーブルの行と列の指定方法はいくつか存在する。テーブルのレイアウトにはおもに以下の3種類のHTMLタグを使用する。データセル<tr>がテーブルの行を表すので<th>や<td>を囲い込むかたちで使用する。以下の例は上の3種類のHTMLタグを使用してテーブルのレイアウトを指定している。</tr></table>このままではテーブルが分かりづらいので、CSSで枠線とスペースを枠線を付ける。10px;}以下のような感じに表が表示されるされるはずだ。セルの結合(colspan・rowspan)次にセルの結合をする方法を説明していこう。セルの結合が必要になる場面は多岐に渡るが、ここでは左側にサイドヘッダーを使用する際のパターンを見ていこう。先ほどのテーブルを以下のように拡張する。</tr></table>以下のように表が表示されるので、緑の枠で囲った部分のセルを結合してみる。セルの結合にはcolspanとrowspan属性を使用する。行の列数を指定する1行目の最初のthにcolspan=”2′′を加え、1行目の2番目のthを削除する。2行目の最初のthにrowspan=”2′′を加え、3行目の最初のthを削除する。</tr></table>以下の写真のようにセルが結合されるはずだ。次にテーブルの列や行をグループ化する方法を解説する。テーブルをグループ化することによって、より効率的にテーブルを作成・管理することができる。列のグループ化(colgroup)テーブルの列をグループ化するには<colgroup>タグを使用する。ここでは先ほどのテーブルを2つのグループに分け色を付けてみよう。グループの分け方は<colgroup>タグ内にセルの数と同じ<col>タグを挟むことによって表現する。}以下の写真のようにテーブルが色分けされる。<colgroup>として指定する列の数はspan属性を使って指定することもできる。<colgroup><col><col></colgroup>は以下のように2通りに記述できる。span="2"></colgroup>行のグループ化(thead・tbody・tfoot)テーブルの行は<thead><tbody><tfoot>の3つのタグを使い、ヘッダー・データ・フッターに分類できる。ここでは最初の行をヘッダーに2・3行目がデータとなるようにHTMLとCSSを変更する。}偶数行だけ背景色を変える次にテーブルの偶数行だけ背景色を変える方法を説明したい。テーブルの偶数行のみスタイルを変えるのはとても簡単でCSSファイル上でtr:nth-child(even)を指定すればいい。//ここで偶数行のスタイルを変更している。}HTMLテーブルのカスタマイズここからテーブルのカスタマイズ方法について見ていきたい。表はブログなどでもよく使用されるので、携帯やタブレットに合わせてスタイルを変化させたいという要望も多いだろう。ここではテーブルのレスポンシブ対応について2つの実装パターンを紹介する。表を横にスクロールするレスポンシブ対応で一番簡単なのは横方向のスクロールを設置するパターン。一定以下の横幅にてスクロールを表示させたいときは、以下のようにtableにoverflow-xとmin-widthプロパティを追加する。600px;}表を縦並びに変更する次は一定の横幅が無い場合に表を縦並びに変えるパターンを紹介する。blockを使用して表を縦並びに変形している。}}執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。