HTML tableタグを初心者向けに解説&便利な知識5選

web開発

2016/08/26

web開発

HTMLのtableタグについてHTML初心者向けに解説します。HTMLのtableタグを使えば、簡単に表を作成することができます。

今回は、WEB開発経験のある筆者が、HTML tableタグの基本・知っておくと便利な知識も5つ紹介します。

本記事を読み終える頃には、HTML tableタグの基本はマスターできているでしょう。ぜひ最後までお読みください。

 

HTML tableタグの基本

まずはHTML tableタグ(table要素)の基本から解説します。tableタグを使えば、以下のような表を作成することができます。

[HTML tableタグで作成できる表のイメージ]

HTML tableタグイメージ画像

このような表は、table要素と、以下で解説するth要素、tr要素、td要素を組み合わせることによって作成できます。

 

tableタグ:th要素

th要素では、表の「見出し」を作成することができます。上記の表のイメージだと、「名前」と「背番号」がth要素です。

th要素解説画像

 

tableタグ:tr要素

tr要素は、表の行を定義するための要素です。上記の表のイメージだと、

①「名前」・「背番号」

②「前田」・「7」

③「鈴木」・「10」

の3つの行それぞれがtr要素です。

tr要素解説画像

 

tableタグ:td要素

td要素は、表のデータを入れるための要素です。上記のイメージ図であれば、「前田」や「10」など、それぞれがデータです。今回の場合はデータが4個存在することになります。

td要素解説画像

以上の要素を組み合わせてHTMLでは表を作成していきます。

 

HTML tableタグで表を作成してみよう

では、実際にHTMLのtableタグで表を作成していきましょう。以下のようなテーブルをブラウザに表示させてみます。

html tableタグ完成イメージ画像

今回の場合だと、

th要素が「日付」と「集合場所」の2つ

tr要素は「日付・集合場所」「2016/4/8・渋谷」「2016/5/20・原宿」の3つ

td要素は「2016/4/8」「渋谷」「2016/5/20」「原宿」の4つですね。

では、コードを書いていきます。

th・tr・tdタグはtableタグで囲むことに注意しましょう。

※1行目の「border=”1″」というコードは後に解説します。

th要素、tr要素、td要素が何を表しているかしっかり確認しておきましょう。以下のようにブラウザに表示されていればOKです。

html tableタグ完成画像

※HTMLのコード結果をブラウザで表示させる方法がわからない人は、HTMLについて解説した記事をお読みください。

 

HTML tableタグ:border属性

先ほどのコードの1行目で、<table border=”1″>というコードがありました。

このコードの意味を解説します。

<table border>を指定すれば、テーブルに枠線を表示させることができます。これはborder属性と呼ばれています。

border属性に指定した数値が、テーブルの枠線の幅になります。

もし仮に、border属性を指定しなければ、枠線が消えるので、以下のようなテーブルとなります。

[border属性を指定しなかった場合]

html tabeタグでborder属性を指定してない場合

 

HTML tableタグで中央(center)寄せにする

先ほど作成したテーブルでは、見出し(th要素)以外のtr要素が左寄せになっていました。

※th要素はデフォルトで中央寄せになります。

html tableタグ左寄せイメージ画像

この章では、すべてのtr要素を中央寄せ(center)にしてみましょう。以下が中央寄せにした完成画像です。

html tableタグ中央寄せイメージ画像

tr要素を中央寄せ(center)にするには、tr要素に「align=”center”」というコードを記述してあげます。以下のようなコードを書いてみましょう。

th要素はデフォルトで中央寄せ(center)になるので、th要素を囲んでいるtr要素には「align=”center”」を与えていません。

このコードを書いて、ブラウザで表示させてみましょう。以下のようにテーブルができていればOKです。

HTML tableタグで中央寄せにした画像

 

HTML tabeタグ:border-collapseプロパティ

テーブルの枠線は、特に何も指定しない限りは2重線になります。

HTML tableが2重線になっている画像

1重線にするためには、border-collapse:collapse;を指定します。

CSSファイルに以下のコードを記述しましょう。(HTMLのコードは上記のコードと同じです。)

※CSSファイルの作成方法がわからない人は、CSSについて解説した記事をお読みください。

ブラウザで確認して、以下のようにテーブルが1重線になっていればOKです。

HTML tableが1重線になっている画像

 

HTML tableタグ:セルを結合する

HTML tableタグで、セルを結合する方法を紹介します。

 

横方向にセルを結合する

横方向でセルを結合するには、結合を適応させたいtd要素に対してcolspanという属性を指定します。

colspanには、結合したい数を指定します。具体的なコードを紹介します。

すると、ブラウザには以下のようなテーブルが表示されます。

HTML tableタグでセルを結合した画像

「国名」というtd要素が「日本」、「アメリカ」という2つのセルの分だけ結合しました。

 

縦方向にセルを結合する

縦方向にセルを結合する場合は、結合を適応させたいtd要素に対してrowspanという属性を指定します。

rowspanには、結合したい数を指定します。では、具体的なコードを見てみましょう。

ブラウザに以下のようなテーブルが表示されるはずです。

HTML tableタグでセルを結合した画像

縦方向に2つのセルの分だけ結合されました。

 

HTML tableタグ:幅を変更する

最後に、HTMLで作成したテーブルの幅を変更する方法を紹介します。テーブルの幅を変更するには、widthという属性で幅を指定します。

例えば、「4.HTML tableタグで中央寄せ(center)にする」で作成したテーブルの幅を300pxにしてみましょう。

<table width=”300″>と記述します。

では、コードの結果を見てみます。以下のようなテーブルができているはずです。

HTML tableタグで幅を変更した画像

列ごとに幅を変更したい場合は、th要素にwidthで幅を指定してあげると良いです。

 

HTML tableタグについての解説は以上です。HTML tableタグは頻繁に使うタグの1つです。ぜひ何度も復習してHTML tableタグをマスターしてください。

udemyでは、HTML初心者向けにHTMLを学習できる講座を用意しています。ぜひそちらも受講してみてはいかがでしょうか?

  

初心者にも易しいHTML講座をご用意しています

初めての人の「HTML5」入門 - Udemy

初めての人の「HTML5」入門 - Udemy

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。このコースではHTML5の成り立ちからマークアップとCSS3、そしてJavaSriptの基礎を実際にコードを書きながら一緒に学びます!このコースはそれらの導入編に該当します。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事