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を学習できる講座を用意しています。ぜひそちらも受講してみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

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

関連記事