【HTML講座】tableタグで表を作成する方法｜画面あり

今回は、HTMLのtableタグで表（テーブル）を作成する方法を実際の画面を見せながら解説します。

「HTMLでどうやったら表が作れるの？」

「表を好きなようにデザインしたい」

こういった疑問をこの記事を読めば、解決できます。

また、HTMLの基本的な書き方については、以下の記事で詳しく解説しておりますので、HTMLの基礎から学びたい方はこちらの記事もどうぞ。

【HTML講座】HTMLとは？基本の要素やタグの使い方も解説！HTMLやHTMLの基本となる要素やタグの使い方を知りたいですか？本記事では実際にサイトを作りながら、HTMLの基本について解説しました。HTMLの基本は、要素とタグ、属性の3つです。これからHTMLの勉強を始めたい方は、是非記事をご覧ください。...

tableタグで表を作成する方法

それでは、tableタグで表を作成する方法を紹介します。

今回は、以下のような表を作成したいと思います。

まずは、表を作るための基本構造を簡単に理解しておきましょう。

HTMLで表を作る際は、以下の4つのタグをよく使います。

tableタグ	表全体を囲むためのタグ
trタグ	表の行を表すタグ
thタグ	表の見出しを表すタグ
tdタグ	表の各データを表すタグ

この4つのタグを簡単に理解した上で、早速テーブルを作成していきます。

① テキストエディターを開く

まずは、HTMLを記載するためのテキストエディターを開きます。

私は、Sublime Textを利用します。

もしテキストエディターの準備が終わっていない方は、以下の記事でSublime Textのダウンロード方法を紹介しております。

【HTML講座】HTMLを始めるための2つの環境設定｜画面ありHTMLを始めるための2つの環境設定を知りたいですか？本記事ではHTMLを始める前に準備すべき2つの環境設定を実際の画面を見せながら解説しました。テキストエディターとブラウザの2つの準備です。これからHTMLの勉強を始めたい方は、是非記事をご覧ください。...

② <table>タグと<tr>タグの記述

次に、<table>タグと<tr>タグを記述していきます。

表を作成するためには、<table></table>で囲む必要があります。

そのため、まずは以下のように入力します。

そして、次にtableの中に行の数だけ<tr></tr>を記述します。

今回は、3行の表を作るため、<tr></tr>を3つ書きます。

③ <th>タグで見出しの作成

次に、<th>タグで見出しを作成します。

今回は、３列のテーブルで3つの見出しが必要なので、3つの<th>タグを1番上の<tr></tr>タグの中に記述します。

<th></th>で囲った文字がサイトに表示されます。

今回だと以下のように「氏名」、「年齢」、「出身」の3つが見出しとして表示されます。

ちなみに、作成中のHTMLをブラウザで確認する方法は、HTMLファイルを保存してGoogle Chromeで開くだけです。

HTMLファイルの保存方法は、以下のショートカットを使うと便利です。

・（Mac）command + s
・（Windows）Ctrl + s

保存ウィンドウが開きますので、ファイル名を「index.html」にしてください。

次に、先ほど作成したHTMLファイルをブラウザで開きます。

まずは、保存したHTMLファイルを右クリックして、「このアプリケーションで開く＞Google Chrome.app」を選択します。

すると作成中のHTMLをブラウザ上で確認することができます。

④ <td>タグで各データを入力

次に、<td>タグで各データを入力します。

<tr></tr>タグの中に<td></td>を3つ入力していきます。

これでtableタグは完成です。

ただし、tableタグはデフォルトだと以下のようになっております。

• thは太字で真ん中寄せ
• tdは左寄せ
• 罫線（ボーダー）はなし

そのため、罫線（ボーダー）などを引きたい場合は、別のcssファイルでデザインを調整することが多いですので、その方法は別途解説します。

⑤ 表の罫線の作成

今回は、tableタグに以下のborder属性を追加して、表の罫線を作成します。

今回作成しているHTMLのtableタグを以下のように変更します。

すると、以下のように表の中に罫線が追記されました。

⑥ 背景に色をつける

次に、表の背景に色をつける以下の2つのパターンを紹介します。

• 表全体の背景色を変える
• 一部の行の背景色を変える

表全体の背景色を変える

表全体の背景色を変えるためには、tableタグに以下のbgcolor属性を追加します。

今回のHTMLのtableタグも以下のように変更します。

すると以下のように背景色が青色になります。

一部の行の背景色を変える

一部の行の背景色を変えるためには、背景色をつけたいthタグもしくは、trタグに先ほど使ったbgcolor属性を追記します。

今回作成しているHTMLのthタグを以下のように変更します。

すると、見出しの部分が青色の背景色に変更されました。

⑦ 文字の配置場所の変更

最後に文字の配置場所を変更していきます。

文字の配置場所を変更する場合は、<tr>タグに、aline属性の中央配置や左寄せ配置、右寄せ配置を指定します。

中央配置	align=”center”
左寄せ配置	align=”left”
右寄せ配置	align=”right”

今回は、HTMLを以下のように記述して、すべての文字を中央配置にしたいと思います。

これで、すべての文字が中央配置されて、表の完成です。

見出し（thタグ）がない表の作り方

見出しがない表を作りたい場合は簡単です。

<th></th>タグを使わず、<table>と<tr>、<td>の3つのタグだけで作るだけです。

たとえば、以下のように3つのタグを使って、HTMLを記述します。

すると、見出しだった太字の部分がなくなり、データをこのように並べることができます。

つまり、<th></th>タグを使わず、<table>と<tr>、<td>の3つのタグだけで表を作ることができます。

表の行や列の増やし方

表の行や列の増やしたい時は、以下のようにしましょう。

• 行を増やす　→　<tr></tr>を追加
• 列を増やす　→　<th></th>または<td></td>を追加

また、列を増やす際は、すべての行の列の数を揃える必要があります。

例えば、以下のテーブルを見てみると、3つの行がある中で、1番下の行の列が1つ足りないことがわかります。

このように、すべての行の列の数が揃っていないと、テーブルの表示がおかしくなるので、列を追加する際は、<td>タグや<th>タグの数に気をつける必要があります。

複数のセルを結合させる

次に、複数のセルを縦方向や横方向で結合させる方法を紹介します。

縦のセルの結合方法

縦のセルの結合をする際は、<td>または<th>のセルに対して、以下の属性を利用します。

• rowspan = “つなげる数”

つなげる数については、例えば2行分のセルを縦につなげる場合は、2になります。

この属性を利用することで、例えば以下のようなテーブルを作成することができます。

上記のような結合をする場合は、以下のようにコードを記述します。

今回は、属性に記載するつなげる数は2つです。

また、この時の注意として、3つ目の<tr>タグに記載していた<td>福岡</td>は必ず削除するようにしましょう。

これで、縦にセルの結合ができました。

横のセルの結合方法

横のセルの結合をする際は、<td>または<th>のセルに対して、以下の属性を利用します。

• colspan = “つなげる数”

つなげる数については、例えば2列分のセルを横につなげる場合は、2になります。

この属性を利用することで、例えば以下のようなテーブルを作成することができます。

上記のような結合をする場合は、以下のようにコードを記述します。

今回は、属性に記載するつなげる数は2つです。

また、この時の注意として、セルを結合した<tr>タグの中には、<th>タグを2つだけ記述します。

今回だと、1行目の2つのセルを結合させているため、1行目の3つ目の<th>タグは不要になっております。

これで、横にセルの結合ができました。

まとめ

今回は、HTMLのtableタグで表を作成する方法を実際の画面を見せながら解説しました。

tableタグは、以下のようなルールに沿って使います。

HTMLのスキルアップの近道は、何度もコードを書くことですので、この記事をきっかけに様々なWEBサイトを作成し、練習してみましょう。

また、効率よくコーディングのスキルを上達させるためには、スクールに通うのもありだと思います。

【2022年最新版】おすすめの安いWebデザインスクール10社｜無料ありおすすめの安いWEBデザインスクールを知りたいですか？本記事ではおすすめの安いWEBデザインスクールを10社紹介しました。オンラインで学びたい方、通学で学びたい方の2パターンです。これからWEBデザインの就職を考えている方は、是非記事をご覧ください。...