LINEで現役エンジニアに直接質問してみよう!登録無料

HTML table、tr、tdでデーブルの作成方法と応用テクニックを解説

この記事では、Webページ上でtableタグを使って表を作成する方法を紹介します。

tableタグの構造と一番基本的な使い方から解説し、セルの結合や表の周りの空白を調節する方法を解説します。 更に、CSSを使って、モダンで見やすい表を作るコツやテクニックなども紹介します。

HTMLで作る表(テーブル)とは?

Web上で、エクセルや方眼紙のような表を作る時tableをいうタグが使われています。

Web業界やHTML作成現場では、「表」よりも「テーブル」の方がよく使われます。この記事でも、「テーブル」という言葉を使って解説していきます。

テーブルは色んな所に使われています。

  • 料金プラン
    • https://vps.sakura.ad.jp/specification/
  • 商品スペック表
    • https://www.buffalo.jp/product/detail/wxr-5950ax12r.html
  • 情報管理サービス
    • https://dashboard.stripe.com/
  • 会社概要のテーブル
    • https://www.panasonic.com/jp/corporate/profile/overview.html

エクセルでまとめられるデータは、テーブルを使って作られている事が多いです。

HTML tableタグ使い方基本

tableタグの使い方を4つの項目で紹介します

  • タグの意味と構造
  • 実際に書いてみる
  • 列や行を増やす方法
  • 複数のセルを結合させる

タグの意味と構造

tableタグはHTMLで表を作るタグです。tableタグだけで表は作ることはできず、tr th tdを組み合わせて表を作ります。

  • trタグ: trは「table row」の略で、その意味の通り表の行を意味します。
  • thタグ: thは「table header」の略で、表の見出しとなるセルを表します。
  • tdタグ: tdは「table data」の略で、表のデータとなるセルを表します。

実際に書いてみる

実際にtableを作ってみると、このようになります。

列や行を増やす方法

行を増やすには、trを追加していけばOKです。 列を増やすには、全てのtr内の子要素(th,td)の数を同じにしなければいけないので、注意しましょう。

まとめると、こんな感じです。

  • 行を増やす ➡ trを追加
  • 列を増やす ➡ thまたはtdを追加

横方向に複数のセルを結合方法: colspan

横方向につなげたい場合、colspan=<つなげたい数>という風な属性を追加します。

例えば、3つ縦方向にセルの結合をしたかったらcolspan=3と記述します。

※ 「colspan=1は1つのセルを横方向に結合する」という意味なので、セルの結合の変化が無いことに注意しましょう。

縦方向に複数のセルを結合: rowspan

縦方向につなげたい場合、rowspan=<つなげたい数>という風な属性を追加します。

例えば、3つ縦方向にセルの結合をしたかったらrowspan=3と記述します。

※ 「rowspan=1は1つのセルを縦方向に結合する」という意味なので、セルの結合の変化が無いことに注意しましょう。

テーブルの装飾

テーブルを見やすくするために、デザインを変更する方法を紹介します。今回は、テーブルの簡単で基本的な装飾を、下記について解説します。

  • 表の余白を変える
  • 表の横幅を変える
  • 表の枠線の種類・色・太さを変える
  • 文字色を変える
  • 背景色を変える
  • 文字を中央寄せする

表の余白を変える

デフォルトのセルには余白が無く、見にくいので適度な余白を設定しましょう。 セルに余白を設定するには、th tdpaddingを設定します。

表の横幅を変える

表全体は、テキストが表示できる最小限の幅になっています。テーブル全体の幅やセルの幅はCSSで自由に変更できるので、見やすい幅に調節します。

普通は、tablewidth: 100%にして、th tdはコンテンツの内容に合わせて%pxを使って調節します。

表の枠線を1本にする

表全体またはセルい罫線を設定するにはCSSでborderを設定します。 ここで注意なのが、ただborderを設定するだけだと、下記のように罫線が2重で表示されてしまいます。

線を2重で表示しないように、border-collapse : collapse;を使います。そうすれば、線はきれいな1本で表示されます。

border-collapse : collapse;tableに対して指定するようにしましょう。

表の枠線の種類・色・太さを変える

CSSのborderを使えば、は罫線のスタイル(種類・太さ・色)をまとめて指定できます。 「種類・太さ・色」の書く順番は決まっていません。が、一般的にこの順番で書くことが多いようです。

文字色を変える

文字色だけを変更することもできます。

文字色を変更するには、CSSのcolorを使います。

tabletrthtdのすべての要素で使用できます。tableに対して適用すれば、表全体の文字色が変わります。

一部のみを変更したい場合には、idclass、擬似クラスなどを使って、要素を指定しましょう。

文字を中央寄せする

セル内の文字を中央揃えする方法です。 文字を中央揃えするには、CSSのtext-align: centerを使います。

tabletrthtdのすべての要素で使用できます。tableに対して適用すれば、表全体の文字が中央揃えになります。

一部のみを変更したい場合には、idclass、擬似クラスなどを使って、要素を指定しましょう。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。