今回は、HTMLのtableタグで表(テーブル)を作成する方法を実際の画面を見せながら解説します。「表を好きなようにデザインしたい」こういった疑問をこの記事を読めば、解決できます。HTMLの基本的な書き方については、以下の記事で詳しく解説しておりますので、HTMLの基礎から学びたい方はこちらの記事もどうぞ。【HTML講座】HTMLとは?基本の要素やタグの使い方も解説!HTMLやHTMLの基本となる要素やタグの使い方を知りたいですか?本記事では実際にサイトを作りながら、HTMLの基本について解説しました。HTMLの基本は、要素とタグ、属性の3つです。これからHTMLの勉強を始めたい方は、是非記事をご覧ください。まとめtableタグで表を作成する方法それでは、tableタグで表を作成する方法を紹介します。今回は、以下のような表を作成したいと思います。表を作るための基本構造を簡単に理解しておきましょう。HTMLで表を作る際は、以下の4つのタグをよく使います。tableタグ表全体を囲むためのタグtrタグ表の行を表すタグthタグ表の見出しを表すタグtdタグ表の各データを表すタグこの4つのタグを簡単に理解した上で、早速テーブルを作成していきます。テキストエディターを開くまずは、HTMLを記載するためのテキストエディターを開きます。Textを利用します。Textのダウンロード方法を紹介しております。【HTML講座】HTMLを始めるための2つの環境設定|画面ありHTMLを始めるための2つの環境設定を知りたいですか?本記事ではHTMLを始める前に準備すべき2つの環境設定を実際の画面を見せながら解説しました。テキストエディターとブラウザの2つの準備です。これからHTMLの勉強を始めたい方は、是非記事をご覧ください。次に、<table>タグと<tr>タグを記述していきます。表を作成するためには、<table></table>で囲む必要があります。そのため、まずは以下のように入力します。<table></table>そして、次にtableの中に行の数だけ<tr></tr>を記述します。今回は、3行の表を作るため、<tr></tr>を3つ書きます。次に、<th>タグで見出しを作成します。今回は、3列のテーブルで3つの見出しが必要なので、3つの<th>タグを1番上の<tr></tr>タグの中に記述します。<th>出身</th></tr><tr></tr><tr></tr></table><th></th>で囲った文字がサイトに表示されます。3つが見出しとして表示されます。Chromeで開くだけです。HTMLファイルの保存方法は、以下のショートカットを使うと便利です。s保存ウィンドウが開きますので、ファイル名を「index.html」にしてください。次に、先ほど作成したHTMLファイルをブラウザで開きます。Chrome.app」を選択します。すると作成中のHTMLをブラウザ上で確認することができます。次に、<td>タグで各データを入力します。<tr></tr>タグの中に<td></td>を3つ入力していきます。<td>福岡</td></tr></table>これでtableタグは完成です。tableタグはデフォルトだと以下のようになっております。thは太字で真ん中寄せtdは左寄せ罫線(ボーダー)はなしそのため、罫線(ボーダー)などを引きたい場合は、別のcssファイルでデザインを調整することが多いですので、その方法は別途解説します。今回は、tableタグに以下のborder属性を追加して、表の罫線を作成します。border=”1以上の整数(罫線の太さ)”>今回作成しているHTMLのtableタグを以下のように変更します。<td>福岡</td></tr></table>すると、以下のように表の中に罫線が追記されました。背景に色をつける次に、表の背景に色をつける以下の2つのパターンを紹介します。表全体の背景色を変える一部の行の背景色を変える表全体の背景色を変える表全体の背景色を変えるためには、tableタグに以下のbgcolor属性を追加します。bgcolor=”色”>今回のHTMLのtableタグも以下のように変更します。<td>福岡</td></tr></table>すると以下のように背景色が青色になります。一部の行の背景色を変える一部の行の背景色を変えるためには、背景色をつけたいthタグもしくは、trタグに先ほど使ったbgcolor属性を追記します。bgcolor=”色”>今回作成しているHTMLのthタグを以下のように変更します。<td>福岡</td></tr></table>すると、見出しの部分が青色の背景色に変更されました。最後に文字の配置場所を変更していきます。文字の配置場所を変更する場合は、<tr>タグに、aline属性の中央配置や左寄せ配置、右寄せ配置を指定します。中央配置align=”center”左寄せ配置align=”left”右寄せ配置align=”right”今回は、HTMLを以下のように記述して、すべての文字を中央配置にしたいと思います。<td>福岡</td></tr></table>これで、すべての文字が中央配置されて、表の完成です。見出しがない表を作りたい場合は簡単です。<th></th>タグを使わず、<table>と<tr>、<td>の3つのタグだけで作るだけです。以下のように3つのタグを使って、HTMLを記述します。<td>福岡</td></tr></table>すると、見出しだった太字の部分がなくなり、データをこのように並べることができます。<th></th>タグを使わず、<table>と<tr>、<td>の3つのタグだけで表を作ることができます。表の行や列の増やしたい時は、以下のようにしましょう。<th></th>または<td></td>を追加また、列を増やす際は、すべての行の列の数を揃える必要があります。以下のテーブルを見てみると、3つの行がある中で、1番下の行の列が1つ足りないことがわかります。このように、すべての行の列の数が揃っていないと、テーブルの表示がおかしくなるので、列を追加する際は、<td>タグや<th>タグの数に気をつける必要があります。複数のセルを結合させる次に、複数のセルを縦方向や横方向で結合させる方法を紹介します。縦のセルの結合をする際は、<td>または<th>のセルに対して、以下の属性を利用します。“つなげる数”つなげる数については、例えば2行分のセルを縦につなげる場合は、2になります。この属性を利用することで、例えば以下のようなテーブルを作成することができます。上記のような結合をする場合は、以下のようにコードを記述します。今回は、属性に記載するつなげる数は2つです。<td>35</td></tr></table>また、この時の注意として、3つ目の<tr>タグに記載していた<td>福岡</td>は必ず削除するようにしましょう。これで、縦にセルの結合ができました。横のセルの結合をする際は、<td>または<th>のセルに対して、以下の属性を利用します。“つなげる数”つなげる数については、例えば2列分のセルを横につなげる場合は、2になります。この属性を利用することで、例えば以下のようなテーブルを作成することができます。上記のような結合をする場合は、以下のようにコードを記述します。今回は、属性に記載するつなげる数は2つです。<td>ジム</td></tr></table>また、この時の注意として、セルを結合した<tr>タグの中には、<th>タグを2つだけ記述します。今回だと、1行目の2つのセルを結合させているため、1行目の3つ目の<th>タグは不要になっております。これで、横にセルの結合ができました。基本は、<td>(※<th>含む)の数は全ての行で同じ数になりますが、セルの結合を行った際は、結合した行の<td>の数が他の行の<td>の数と異なります。まとめ今回は、HTMLのtableタグで表を作成する方法を実際の画面を見せながら解説しました。tableタグは、以下のようなルールに沿って使います。colspanを利用すると、横のセルを結合できるHTMLのスキルアップの近道は、何度もコードを書くことですので、この記事をきっかけに様々なWEBサイトを作成し、練習してみましょう。効率よくコーディングのスキルを上達させるためには、スクールに通うのもありだと思います。【2022年最新版】おすすめの安いWebデザインスクール10社|無料ありおすすめの安いWEBデザインスクールを知りたいですか?本記事ではおすすめの安いWEBデザインスクールを10社紹介しました。オンラインで学びたい方、通学で学びたい方の2パターンです。これからWEBデザインの就職を考えている方は、是非記事をご覧ください。DesignerYuta某大手企業勤務。2020年よりWEB制作やデザインの勉強を開始し、40件以上の案件を対応。Photoshopを中心にスキル上達コンテンツを無料で発信中。