イラレ・フォトショ講座

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

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

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

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

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

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

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

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>

</table>

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

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

<table>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

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

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

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

<table>

<tr>

<th>氏名</th> <th>年齢</th> <th>出身</th>

</tr>

<tr></tr>

<tr></tr>

</table>

<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>

<tr>

<th>氏名</th> <th>年齢</th> <th>出身</th>

</tr>

<tr>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

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

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

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

⑤ 表の罫線の作成

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

<table border=”1以上の整数(罫線の太さ)”>

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

<table border=”1″>

<tr>

<th>氏名</th> <th>年齢</th> <th>出身</th>

</tr>

<tr>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

⑥ 背景に色をつける

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

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

表全体の背景色を変える

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

<table border=”1以上の整数(罫線の太さ)” bgcolor=”色”>

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

<table border=”1″ bgcolor=”blue”>

<tr>

<th>氏名</th> <th>年齢</th> <th>出身</th>

</tr>

<tr>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

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

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

<th bgcolor=”色”>

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

<table border=”1″ >

<tr>

<th bgcolor=”blue”>氏名</th> <th bgcolor=”blue”>年齢</th> <th bgcolor=”blue”>出身</th>

</tr>

<tr>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

⑦ 文字の配置場所の変更

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

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

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

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

<table border=”1″ >

<tr align=”center”>

<th bgcolor=”blue”>氏名</th> <th bgcolor=”blue”>年齢</th> <th bgcolor=”blue”>出身</th>

</tr>

<tr align=”center”>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr align=”center”>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

見出し(thタグ)がない表の作り方

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

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

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

<table border=”1″>

<tr>

<td>ゆうか</td> <td>18</td> <td>佐賀</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td> <td>福岡</td>

</tr>

</table>

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

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

スポンサーリンク

表の行や列の増やし方

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

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

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

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

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

複数のセルを結合させる

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

縦のセルの結合方法

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

  • rowspan = “つなげる数”

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

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

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

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

<table border=”1″>

<tr>

<th>氏名</th> <th>年齢</th> <th>出身</th>

</tr>

<tr>

<td>ゆうか</td> <td>18</td> <td rowspan=”2″>福岡</td>

</tr>

<tr>

<td>ゆうた</td> <td>35</td>

</tr>

</table>

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

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

横のセルの結合方法

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

  • colspan = “つなげる数”

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

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

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

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

<table border=”1″>

<tr>

<th>氏名</th> <th colspan=”2″>趣味</th>

</tr>

<tr>

<td>ゆうか</td> <td>早口言葉</td> <td>歌</td>

</tr>

<tr>

<td>ゆうた</td> <td>魚釣り</td> <td>ジム</td>

</tr>

</table>

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

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

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

基本は、<td>(※<th>含む)の数は全ての行で同じ数になりますが、セルの結合を行った際は、結合した行の<td>の数が他の行の<td>の数と異なります。

まとめ

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

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

・テーブルを作成する際は、<table>、<tr>、<th>、<td>を利用する

・行を増やすときは、<tr>タグを増やす

・列を増やすときは、<th>または<td>タグを増やす

・<td>(※<th>含む)の数は全ての行で揃える(※セルの結合をしていない場合)

・属性 rowspanを利用すると、縦のセルを結合できる

・属性 colspanを利用すると、横のセルを結合できる

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

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

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