HTMLのtableタグの書き方と表のカスタマイズ方法

ホームページなどを作るときに重要なHTMLという略語を目にしますが、くわしく理解できていない方も多いのではないでしょうか。

この記事ではtableタグの構造や書き方、表のカスタマイズの方法を実際のコード例とともに解説します。

初心者の方はコードの特徴や使い方を覚え、実践を重ねて理解を深めていきましょう。WordPressなどでブログを作成したいと考えている方は、ぜひこの記事を参考に知識を整理してみてください。

HTMLでのtableタグの書き方

頻繁に名前を聞くHTMLは「Hyper Text Markup Language」の略語で、マークアップ言語のひとつです。

タグの書き方を覚えるとホームページなどのWebサイトが作れ、伝えたいことをより多くの人に明確にアピールできます。

ただし、書き方を覚えるためには構成要素が何であるかをきちんと理解しておく必要があります。

tableタグの構成要素

タグの構成要素は3つあり、タグ以外にも属性とコンテンツがあります。

タグは「<要素名>」が基本形であり、「<」でタグが始まり、「>」で囲まれた部分が終了タグとして認識されます。

属性はタグの間の要素名の後にスペースを空け、【属性名=”属性値”】の形で記述します。

例えばリンクを作成するためのタグの場合は、リンク先のURL情報である【href=”リンク先のURL”】の部分が属性です。

コンテンツは開始タグと終了タグに囲まれた部分が該当し、一例として【<h2>コンテンツ</h2>】になります。

HTMLタグの代表例として、見出しは【<h1>〜</h1>】で表示でき、数字を大きくすると文字サイズが小さくなります。

段落分けをするときは【<p>〜</p>】を使い、改行は<br>と書けば実現できます。

ブロック分けにはdivタグを使うと一つの固まりとして分かりやすくなり、【<div>〜</div>】と記述します。

リンクを貼る場合は一例として【<a href=”リンク先のURL” target=”_blank”>リンクテキスト</a>】のように書きます。

【<a>〜</a>】の間にリンクを貼り、hrefは属性、【target=”_blank”】は別タブでリンクを開きたい場合に指定します。

画像の場合はimgタグを用い、【<img src=”画像のURL(パス)” alt=”画像名”>】のように記述します。

HTMLで表（table）を表示してみよう

HTMLで表を表示する基本的なコードは以下のようになります。

それぞれのタグの役割は以下のとおりです。

• <table>：表全体を囲むタグ
• <tr>：行（テーブルロー）を表すタグ
• <th>：見出しとなるセルに使うタグ
• <td>：通常のデータセルに使うタグ

関連記事
HTMLとCSSとは？違いや関係性・書き方から学習方法まで初心者向けに解説

tableタグのカスタマイズ例

HTMLタグで表を作るときはtableタグを用いますが、見やすくするためにはカスタマイズが必要です。

カスタマイズの方法には、枠線の追加、行や列の増減、幅や高さの調整、見出しを縦に並べる、セルの結合などがあります。

表を挿入すると情報をうまく整理して伝えやすくなるため、以下のカスタマイズ方法をしっかり覚えておきましょう。

タグをカスタマイズするときはソースをコピーして置き換えていくことができますが、そのためには仕組みをきちんと理解しておく必要があります。

表は文章で書いても伝わりにくいことが多く、ひと目見るだけでイメージがつかめるように活用するのが効果的です。

枠線を追加する方法

枠線はborder属性を使うと表示でき、数値で太さを調整できます。

枠線を追加する方法は【<table border=”1″>】のように【border=”1″】を付け加えるだけで実現できます。

borderの横の数字は枠線の太さになり、0にすると表示されなくなります。

ただし、【1】の場合でも二重線が出るため、一重にするためにはCSSで【border-collapse: collapse】を指定することが必要です。

また、色を変えたい場合はborder-colorプロパティで指定できます。

• solid：1本線で表示
• double：2本線で表示

行・列を増やす方法

行や列を増やす場合は、<tr>と<td>で行を、<tr>と<th>で列を追加できます。

以下のコード例のように、必要な行数・列数に合わせてタグを繰り返し記述します。

幅・高さを変える方法

幅や高さの調整は【width】と【height】を用いて指定します。

以下のように数値（ピクセル数）をそれぞれの属性に入力することで、サイズを細かく調整できます。

【width】は幅、【height】は高さを示し、数字はピクセル数になります。

幅や高さは%（パーセント）でも指定でき、ピクセルでサイズの目安がつかみにくい場合に便利です。

テーブルでは事前に幅や高さが設定されている場合、%で表示するとその数値に対する割合として反映されます。

見出しを縦に並べる方法

見出しセルは表を分かりやすく表示するために縦または横に並べますが、<th>タグを使って表示します。

縦に並べる場合は、<tr>で囲まれた部分の最初の項目をそれぞれ<th>にするだけです。

その他の箇所は<td>にすることで、見出しセルとデータセルを使い分けられます。

セルを結合させる方法

セルを結合する方法はrowspan属性またはcolspan属性を使います。

【rowspan=”2″】は縦方向に2つのセルを結合する仕組みで、以下のように記述します。

この場合は1行目と2行目の右のセルが統合され、同じ情報をまとめて表示できます。

情報が重複するセルを結合することで、表全体がすっきりと見やすくなります。

関連記事
セレクトボックス（プルダウン）の作り方｜HTMLタグや属性の使い方を解説

CSSでデザインを整えよう

表を見やすくするコツはCSSでデザインを整えることです。

CSSとは文字の色やサイズ、背景、配置などを設定するスタイルシート言語で、見やすいレイアウトを作ることができます。

表をより伝わりやすくするためには、文字や背景の色を変え、セルの内側に余白を入れ、中身を中央寄せにすることが効果的です。

表のデザインを整えることは見やすい文書を作るために必要不可欠ですが、指定する場所を正確に入力しないと意図どおりに反映されないこともあります。

初心者の方はコードの仕組みをきちんと把握した上で、実際に確認しながら進めることが大切です。

tableの文字色や背景色を変える方法

文字の色を変えるときは【color: 色;】を、背景の色を変えるときは【background: 色;】を使います。

色の指定方法は「アルファベット表記（例：red）」または「#FF9800のような16進数の色コード」の2種類があり、状況に合わせて使い分けましょう。

入力する場所は<table>の直後に入れると表全体に適用され、<th>は見出しセルのみ、<td>はその他のセルのみに適用されます。

一部のセルだけ変更したい場合は、対象の<th>や<td>タグに個別に指定することで適用範囲を細かくコントロールできます。

セルの内側に余白をつける方法

セルの内側に余白を入れたい場合は【padding】を使います。

paddingの指定方法は上下左右の組み合わせで、以下のように使い分けます。

• padding: 2px; → 上下左右すべてに2pxの余白
• padding: 2px 4px; → 上下に2px、左右に4pxの余白
• padding: 2px 4px 6px; → 上に2px、左右に4px、下に6pxの余白
• padding: 2px 4px 6px 8px; → 上・右・下・左の順にそれぞれ指定

paddingのそれぞれの数字は半角スペースで区切り、方向を間違えないよう注意して入力しましょう。

余白を入れるときは文字がズレると逆に見づらくなるため、数値を少しずつ調整しながら確認することをおすすめします。

tableの中身を中央に寄せる方法

文字を中央寄せにすると表が見やすくなり、初期設定の左寄せを修正したい場合にも活用できます。

中央寄せの方法はtableに対して【text-align: center;】を指定します。

以下のように記述することで、表全体の文字が中央に揃います。

関連記事
Photoshopの画像の切り抜き方法3選！髪の毛も綺麗に切り抜くコツ

HTML・CSSを学ぶならプログラミングスクールがおすすめ

HTMLやCSSは初心者には難しく感じやすく、どのように学ぶか迷う方も多いです。

しかし、プログラミングスクールでは講師が分かりやすく教えてくれるため、独学より効率よく理解を深めることができます。

独学では書き方や構造を習得するまでに時間がかかり挫折しやすいため、体系的に学べるプログラミングスクールに通うことが効果的です。

プログラミングスクールには通学型とオンライン型があり、目標や生活スタイルに合わせて最適なカリキュラムを選べます。

HTMLやCSSはホームページ制作に必須の技術であり、エンジニアを目指す方はきちんと習得しておく必要があります。

プログラミングスクールで学ぶ主なメリットは3つあります。

• 専門家のサポートで挫折しにくい
• 最新の技術・トレンドが学べる
• 転職・就職のサポートが受けられる

また、スクールへの通学にはそれなりに費用がかかるため、実績や目的に合ったスクールを選ぶことが重要です。

まとめ

HTMLのtableタグを使えば、ホームページ上に分かりやすい表を作成することができます。

枠線の追加やセルの結合、幅・高さの調整など、各種カスタマイズを活用することで、伝えたい情報をより整理して表示できます。

さらにCSSを組み合わせることで、色や余白・中央寄せなどのデザインを細かく整えることができます。

HTMLやCSSは最初は難しく感じますが、プログラミングスクールなどを活用して基礎からしっかり学ぶことで、スムーズに習得できます。

まずはこの記事で紹介したコード例を実際に書いて確かめることから始めてみてください。