表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】現役Webデザイナーが解説

この記事ではHTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介します。

HTMLでテーブルを表示する方法を学習していただくことで、HTMLを利用してエクセルのような表を作れるようになります。

表を利用できるようになると、今まで文章だけで記載していたコンテンツを、わかりやすく一覧できるコンテンツにすることが可能です。

一覧で、コンテンツの要点だけを伝えたい場合や、数字を扱うコンテンツの場合に、表を使ってわかりやすい表示を作ってみましょう。

目次

• テーブル（表とは）
• HTMLでテーブルを表示するために使うタグ
• テーブルを実際に作ってみよう
• 応用編：テーブルの構造をまとめる
• テーブルのデザインを変更する方法
• 表をスマホ対応で表示する方法

 

テーブル（表とは）

まずはテーブル（表）の基礎を知っておきましょう。

HTMLでも表をつくることができます。

表はテーブルと呼ばれます。

 

横一列のデータのことを「行（レコード）」といい、ひとつのデータの塊を意味します。

縦一列のデータを「列（カラム）」、ひとつひとつのマスのことを「セル」と呼び、セルの中に各データの値を入れていきます。

「行（レコード）・列（カラム）・セル」は、Excelやデータベースでデータを管理するSQLでも共通している概念ですのでぜひ覚えておきましょう。

 

[PR] Webデザインで副業する方法とは

HTMLでテーブルを表示するために使うタグ

HTMLでは以下のタグを使ってテーブルを表示します。

 

表（テーブル）を作る

<table>表（テーブル）</table>

表（テーブル）をつくるタグです。

 

見出しを作る

<th>見出し</th>

セルの要素であり、表の見出しを意味します。

 

データをいれるセルを作る

<td>データ</td>

セルの要素であり、表の値(データ)を意味します。

 

横方向のセルをまとめる

 <tr>tdやthなどの要素</tr>

表でつくられる横一列のセルをまとめます。

 

 

 

テーブルを実際に作ってみよう

<table>タグに「border=”1″」を加えると枠が表示されます。

<table>タグのなかに<tr>タグで各データの行を指定し、そのなかに<td>タグでデータを入力します。

<th>タグではデータの見出しをつけましょう。

 

HTML

<table border="1">
  <tr>
    <th>日本語</th>
    <th>英語</th>
  </tr>
  <tr>
    <td>東京</td>
    <td>Tokyo</td>
  </tr>
  <tr>
    <td>大阪</td>
    <td>Osaka</td>
  </tr>
</table>

 

解説

<table border=”1″>でテーブルを作成することを意味しています。

borderは枠線の太さを指定していますが、html5では1しか指定できません。

枠線の表示に関してはcssで指定することが実務でも一般的です。

cssでテーブルのデザインを変える方法については次の記事を参考にしてみてください。

サンプル有り！CSSで書くテーブル（table）の作り方 | TechAcademyマガジン

 

２行目の <tr>では、横方向の<th>をまとめています。

つまり、

<th>日本語</th>
<th>英語</th>

が横に並ぶように<tr>で囲んでいます。

 

３行目と４行目の<th>では、表の見出しを作っています。

見出しがあると、見出しだけ別の色にしたりすることで、表が非常にわかりやすくなります。

 

６行目の <tr>では、具体的なデータである横方向の<td>をまとめています。

<td>東京</td>
<td>Tokyo</td>

の部分が該当し、thで指定した日本語と英語に対応するように、東京とTokyoというデータが表示されます。

 

１０行目の <tr>では、具体的なデータである横方向の<td>をまとめています。

<td>大阪</td>
<td>Osaka</td>

の部分が該当し、thで指定した日本語と英語に対応するように、大阪とOsakaというデータが表示されます。

 

表示結果

ブラウザで確認するとこのように表示されました。

テーブルが表示され、<th>タグで囲った部分が太字になりました。

<tr>タグは横一列のデータを「行」としてまとめ、その行をつくる値が<td>で表示されます。

 

動作確認

 

応用編：テーブルの構造をまとめる

テーブルは<thead><tbody><tfoot>のタグを使って表の構造をまとめることができます。

表の構造をまとめるということは、これまでtheadで表題だけ、tbodyでデータ部分だけ、tfootでフッターだけをそれぞれひとまとめのグループとして考えることが可能です。

例えばtheadだけグループにすることで、縦方向に長い表であったとしても、theadで囲まれた部分だけ固定して表示することが可能になります。

表の構造をまとめることで、ユーザーがより理解しやすいコンテンツを、よりわかりやすく一覧できるようになります。

 

タグの意味まとめ

それぞれのタグは下記の意味です。

 

table headをグループ化する

<thead>〜</thead>

（<table>タグ内で）テーブルのヘッダー部分を意味します。

 

table bodyをグループ化する

<tbody>〜</tbody>

テーブルのボディ部分を意味します。

 

table footをグループ化する

<tfoot>〜</tfoot>

テーブルのフッター部分を意味します。

 

セルを連結する

colspan

セルを連結させます。

「colspan=”n”」で「n個のセルを連結する」という意味になります。

 

先ほど作成した表に<th>タグと<td>タグを使って、「名物」という列（カラム）と一言コメントが入った行（レコード）を追加してみましょう。

ここではひとつのセルにコメントが収まりきらないので、 colspanをつかってセルを連結させます。

「colspan=”3″」で3つのセルをひとつにまとめるという意味になります。

<td colspan="3">ようこそ日本へ！</td>

 

<thead><tbody><tfoot>タグをつかって表をまとめると、以下のようになります。

 

見た目の上では、<thead>も<tbody>も<tfoot>もブラウザに反映されることはありませんが、表が大きく複雑になるにつれ、表の構造をしっかりまとめておくと後に編集しやすくなります。

表を構造化する要素として覚えておきましょう。

 

動作確認

今回はtheadに対して

<thead style="display: block;">

のように指定することで表をスクロールしてもヘッダーが固定表示されるようにしています。

 

テーブルのデザインを変更する方法

余白を変更する

テーブル内の余白を変更します。

今回はすべての余白を同じ比率で大きくします。

 

HTML

<table border="1" style="border-collapse: collapse;">
  <thead style="display: block;">
    <tr>
      <th style="width:150px;">日本語</th>
      <th style="width:150px;">英語</th>
    </tr>
  </thead>
   
  <tbody style="display: block;overflow-y:scroll;height:200px;">
    <tr>
      <td style="width:150px;">東京</td>
      <td style="width:150px;">Tokyo</td>
    </tr>
    <tr>
      <td>埼玉</td>
      <td>Saitama</td>
    </tr>
    <tr>
      <td>神奈川</td>
      <td>Kanagawa</td>
    </tr>
    <tr>
      <td>千葉</td>
      <td>Chiba</td>
    </tr>
  </tbody>
</table>

 

CSS

table th{
  padding : 20px;
}

table td{
  padding : 20px;
}

 

解説

cssのtable th{ではpaddingを利用して上下左右に20pxの余白を指定しています。

paddingの指定は次のような法則で指定できます。

1つだけ設定した場合：上下左右すべてに指定した数値の余白ができます。
2つ設定した場合：1つめの数値が上下に、2つめの数値が左右に適用されます。
3つ設定した場合：1つめの数値が上に、2つめの数値が左右に、3つめの数値が下に適用されます。
4つ設定した場合：1つめの数値が上になり、次に右、下、左と時計回りの順番で適用されます。

余白を指定したい！CSSのpaddingの使い方 | TechAcademyマガジン

 

動作確認

 

 

幅を変更する

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td></tr>
    <tr><th>人気</th><td>1位</td><td>2位</td><td>3位</td></tr>
</table>

 

CSS

table{
  width: 100%;
}

th{
  width: 10%;
}

td{
  width: 30%;
}

 

解説

cssの次のコードでテーブル全体を100%として考えます。

table{
  width: 100%;
}

 

cssの次のコードで左端のth部分を全体の10%にします。

th{
  width: 10%;
}

 

cssの次のコードで残りのtdデータ部分を1セルあたり30%にします。

データは3セルあるので合計90%利用するという計算です。

セル数が増えた場合、table部分からhead部分を引いた残りの%を均等になるように、tdのwidthを指定するときれいに表示できます。

td{
  width: 30%;
}

 

動作確認

 

 

罫線の種類・色・太さを変更する

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td></tr>
    <tr><th>人気</th><td>1位</td><td>2位</td><td>3位</td></tr>
</table>

 

CSS

th{
  border:double 5px red;
}

td{
  border:dashed 5px #008DBD;
}

 

解説

cssのborder:doubleでth部分の罫線を二重線にして、罫線の太さを5pxにして、罫線の色をredで赤色にしています。

th{
  border:double 5px red;
}

 

cssのborder:dashedでtd部分の罫線を破線にして、罫線の太さを5pxにして、罫線の色を#008DBDで青色にしています。

td{
  border:dashed 5px #008DBD;
}

 

動作確認

 

 

文字色・背景色を変更する

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td></tr>
    <tr><th>人気</th><td>1位</td><td>2位</td><td>3位</td></tr>
</table>

 

CSS

th{
  background-color: red; 
}

td{
  background-color: #008DBD; 
}

 

解説

cssのbackground-color: red; でth部分の背景色をredで赤色にしています。

th{
  background-color: red; 
}

 

cssのbackground-color: #008DBD; でtd部分の背景色を#008DBDで青色にしています。

td{
  background-color: #008DBD; 
}

 

動作確認

 

 

セルを結合する（縦）

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td rowspan="3">未定</td><td>JavaScript</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td></tr>
    <tr><th>人気</th><td>1位</td><td>2位</td></tr>
</table>

 

解説

htmlのrowspan=”3″の部分で表の縦向きに行を結合します。

結合した行は未定と表示している部分です。

rowspan=”3″の数字の部分を調整することで、表の形が変わってもきれいに表示することが可能です。

今回はthに言語、用途例、人気の3行あるため、3行をまとめるためには、rowspan=”3″と指定しています。

 

動作確認

 

 

セルを結合する（横）

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td></tr>
    <tr><th>転職</th><td colspan="3">未経験から転職可能</td></tr>
</table>

 

解説

htmlのcolspan=”3の部分で表の横の行を結合しています。

結合した行は未経験から転職可能と表示している部分です。

colspan=”3の数字の部分を調整することで、表の形が変わってもきれいに表示することが可能です。

今回はthにPython、JavaScript,PHPの3列の3セルにあるため、3列ををまとめるためには、rowspan=”3″と指定しています。

 

動作確認

 

表をスマホ対応で表示する方法

横幅を100％にする

HTML

<table border="1">
    <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td></tr>
    <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td></tr>
    <tr><th>目的</th><td>転職</td><td>起業</td><td>副業</td></tr>
</table>

 

CSS

th{
  display : block;
  background-color: red; 
}

td{
  display : block;
  background-color: #008DBD; 
}

 

解説

cssのdisplay : block;でthをブロックレベル要素に指定しています。

同様にtdもdisplay : block;でブロックレベル要素に指定しています。

ブロックレベル要素に指定することで横幅が100%になりスマホ表示したときにきれいに表示できます。

 

動作確認

スクロール対応をする

HTML

<div class="scroll">
    <table border="1" class="nowrap">
        <tr><th>言語</th><td>Python</td><td>JavaScript</td><td>PHP</td><td>サーバーサイド</td><td>サーバーサイド</td></tr>
        <tr><th>用途例</th><td>機械学習</td><td>フロントエンド</td><td>サーバーサイド</td><td>サーバーサイド</td><td>サーバーサイド</td></tr>
         <tr><th>目的</th><td>転職</td><td>起業</td><td>副業</td><td>サーバーサイド</td><td>サーバーサイド</td></tr>
    </table>
</div>

 

CSS

.scroll{
    overflow-x : auto
}

.nowrap{
    white-space:nowrap
}

th{
    background-color: red; 
}

td{
    background-color: #008DBD; 
}

 

解説

htmlの<div class=”scroll”>で、親要素としてtable要素を囲んでいます。

scrollというクラスはcssの次のクラスを指定しています。

overflow-x : autoは表の横方向に対して、範囲内に収まらない場合、スクロールバーなどで表示をきれいに収めるための指定です。

.scroll{
    overflow-x : auto
}

 

加えてhtmlの<div class=”scroll”>を親要素としたときの子要素として、<table border=”1″ class=”nowrap”>の class=”nowrap”を指定することで、スクロールを表示可能になります。

具体的には次のcssのnowrapクラスの実装が必要です。

これにより、スペースを無視し、改行を1つの半角スペースとして表示し、サイズ指定時の自動改行を行わない処理ができることで、overflow-x : autoと組み合わさることで横方向にスクロール表示が可能になります。

.nowrap{
    white-space:nowrap
}

 

動作確認

 

今回はHTMLでテーブルを表示する方法についてご紹介しました。

さらにHTMLの基礎を学びたい場合は、HTMLでiframeを使う方法も合わせてご覧ください。

 

この記事を監修してくれた方

中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

 

【動画でも解説しています。クリックで見る！】