【HTML・CSS】table要素で表を実装するには？コピペで使えるデザインサンプルも紹介

HTMLとCSSを用いて、表をデザインしたいときがありますよね。

表を実装できるtable要素の構成には、td要素やth要素など、似たような名前のものが多く、使いにくいと感じる方も多いでしょう。

今回は、HTMLとCSS、table要素を使って、表を実装する方法を知りたいという方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLとCSSのtable要素を理解し、自分の作りたい表を実装できるようになりますよ。

ぜひ最後まで読んでくださいね！

table要素で使う主な要素

HTMLで表を作成したい場合には、table要素を使用します。

table要素を構成する要素はいくつかあるのですが、今回はtr要素、th要素、td要素について解説していきます。

表作成の基本的な要素なので、必ず覚えておきましょう。

具体的にコードを書くと以下のようになります。

<table border=1>
  <tr>
    <th>果物</th><th>価格</th>
  </tr>
  <tr>
    <td>イチゴ</td><td>300円</td>
  </tr>
  <tr>
    <td>レモン</td><td>220円</td>
  </tr>
</table>

thとtdはセルと呼ばれ、trで囲うことで行にすることができます。

行の中に複数のセルを並べることで、表を作成します。

上記では2つのセルが並んでいますね。これを増やすことで、表の列が増えることになります。

thは「Table Header」の略です。見出しや項目など、表のヘッダー部分のセルになります。

tdは「Table Data」の略です。こちらは、表本体のデータを入れていくセルです。

trは「Table Row」の略で、そのまま表の行という意味ですね。

trの数は表の行数、1行の中のthとtdの数は表の列数、ということになります。

表に見出しがない場合には、thを使わなくても問題ありません。

複数のセルを結合する方法

2つ以上のセルが結合して1つになり、複数の場所にまたがって表示されているセルを見たことはありませんか？

これはセルの属性を指定することで実装できます。

横につながげる場合と縦につなげる場合で、以下の2つの異なる属性を使用します。

それぞれ解説していきましょう。

colspan属性

セルを横につなげたい場合には、colspan属性を使用します。

<table border=1>
  <tr>
    <th>品名</th><th>サイズ</th><th>金額</th>
  </tr>
  <tr>
    <td>コーラ</td><td>Sサイズ</td><td>120円</td>
  </tr>
  <tr>
    <td>紅茶</td><td>Mサイズ</td><td>250円</td>
  </tr>
  <tr>
    <td>ホットコーヒー</td><td>Mサイズ</td><td>170円</td>
  </tr>
  <tr>
    <td colspan="2">合計</td><td>540円</td>
  </tr>
</table>

属性値には、結合したいセルの数を書き込みます。

上記では、2つ分のセルがくっついて「合計」と書かれた1つのセルができていますね。

この結果、最後の行だけ、tdが2つになっています。

ここでtdの個数を間違えるとレイアウトが崩れてしまうので気をつけましょう。

rowspan属性

セルを縦につなげたい場合には、rowspan属性を使用します。

<table border=1>
  <tr>
    <th>食べ物</th><th>種類</th>
  </tr>
  <tr>
    <td>キャベツ</td><td rowspan="2">野菜</td>
  </tr>
  <tr>
    <td>スイカ</td>
  </tr>
  <tr>
    <td>リンゴ</td><td rowspan="3">果物</td>
  </tr>
  <tr>
    <td>オレンジ</td>
  </tr>
  <tr>
    <td>ブドウ</td>
  </tr>
</table>

colspan属性と同様、属性値には結合するセルの数を挿入します。

食べ物の種類である「野菜」と「果物」のセルが縦につながっています。

こちらもセルの数を調整しないとレイアウトが崩れてしまうので注意しましょう。

colspan属性とrowspan属性を組み合わせて、様々な表を作成してみてくださいね。

CSSを使った基本的な装飾

table要素で表を作成しただけでは、何も装飾がなく味気ないですよね。

見栄えを良くするために、CSSでスタイルを指定していきましょう。

ここでは、表のデザインを整えるためによく使われる装飾方法を紹介します。

下記の共通のHTMLにCSSを適用していきます。

<table border=1>
  <tr>
    <th>お菓子</th><th>価格</th>
  </tr>
  <tr>
    <td>チョコ</td><td>100円</td>
  </tr>
  <tr>
    <td>クッキー</td><td>250円</td>
  </tr>
</table>

枠線の設定を変更する

まずは枠線を設定する方法です。

以下のようにtableタグの中に枠線の設定を行うこともできますが、他の部分もCSSで装飾することを考えて、この指定もCSSで行いましょう。

<table border="1">
  <tr>
    <th>お菓子</th><th>価格</th>
  </tr>
  ...
</table>

CSSで枠線は以下のように指定します。

table {
    border-collapse: collapse; 
}
th,td {
    border: solid 1px #333; 
}

borderプロパティを使って、セルの枠線を指定しています。

1pxの枠線で囲まれました。見出しセルとデータセルで枠線の太さや色などを変えて工夫してみても良いですね。

border-collapseプロパティは、線の重なりをどうするのか指定するものです。

collapseを指定することで、各セルの線が重なり、自然な表を作ることができます。

初期値はseparateで、この指定では枠線は重ならず、各セルが間をあけて配置されます。

作りたい表に応じて使い分けてみてください。

セルの余白を作る

枠線を指定すると、枠線と中の文字に隙間が少ないことが気になり出すかと思います。

見やすいように、枠線と文字の間に十分な余白を作成しましょう。

table {
  border-collapse: collapse;
}
th, td {
  padding: 7px 13px; 
  border: solid 1px #333;
}

paddingプロパティを使って、文字の周囲に余白を作っています。

セル全体のサイズが大きくなりました。見出しセルとデータセルで上下の余白を変えてみるのも良いかもしれませんね。

背景色や文字の色を変える

セルの中の背景色や文字の色などを変更することができます。

th, td {
  padding: 7px 20px; 
}
th {
  background: #008080;
  color: #fff;
}
td {
  background: #eee;
  color: #333; 
}

枠線は設定せず、背景色と文字の色でセルを区別しています。

背景色は、background（もしくはbackground-color）プロパティで指定し、文字の色はcolorプロパティで指定しています。

thとtdで文字の色が同じ場合には、table要素に指定する方法もありますね。

レスポンシブ対応させる

レスポンシブデザインにすることもできます。

table{
  max-width: 650px;
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 7px 0; 
  border: solid 1px #333;
}

「width: 100%」を指定することで、親要素いっぱいに表全体が広がります。

ただ、PCのブラウザで見ると大きすぎることもありますね。

上記では、max-widthプロパティを使って、幅の最大値を指定しています。

650px以下の場合は、親要素いっぱいの大きさになりますが、650pxより大きいサイズにはなりません。

HTML・CSSを使ったtableのデザイン紹介

table要素を使って表を作成する方法が掴めてきたでしょうか？

ここでは、実践的なデザインサンプルを3つ紹介します。

ぜひ、使ってみてくださいね。

ここまでお伝えしてきた基本を抑えていれば、アレンジも簡単にできるはずですよ。

交互に背景色を変えるシンプルなデザイン

背景色を交互に変えて見やすくしたデザインを紹介します。

<table>
  <tr>
    <th>日程</th>
    <th>イベント名</th>
    <th>定員</th>
    <th>料金</th>
  </tr>
  <tr>
    <th>5月12日</th>
    <td>映画観賞会</td>
    <td>25名</td>
    <td>2000円</td>
  </tr>
  <tr>
    <th>6月9日</th>
    <td>読書会</td>
    <td>15名</td>
    <td>無料</td>
  </tr>
  <tr>
    <th>6月28日</th>
    <td>VR体験会</td>
    <td>30名</td>
    <td>500円</td>
  </tr>
  <tr>
    <th>7月1日</th>
    <td>バーベキュー交流会</td>
    <td>10名</td>
    <td>3000円</td>
  </tr>
  <tr>
    <th>8月5日</th>
    <td>花火大会</td>
    <td>20名</td>
    <td>1000円</td>
  </tr>
</table>

CSSは以下のように記述します。

table{
  max-width: 800px;
  width: 100%;
  border-collapse: collapse;
}
th, td{
  padding: 10px;
  text-align: center;
  color: #333;
}
table tr:first-of-type th {
  background-color: #52cc78;
  color: #fff;
}
table tr:nth-of-type(even) {
  background-color: #eee;
}

最初の行は見出しになるので、目立つ色にしています。

その後の行は灰色と白が交互になるように指定しました。

「:first-of-type」という疑似クラスをつけることで、その種類の要素で最初に現れる要素にスタイルを適用することができます。

同様に、「:nth-of-type(n)」という疑似クラスをつけると、n番目の要素にスタイルを適用できます。

上記では、「:nth-of-type(even)」とすることで、偶数番目の要素のスタイルを設定しています。

プラン比較などに使われるデザイン

Webサービスのプランの料金比較に使えそうなデザインを紹介します。

<table>
  <tr>
    <th>フリープラン</th>
    <th>ベーシックプラン</th>
    <th>プレミアムプラン</th>
  </tr>
  <tr>
    <td>無料</td>
    <td>3,000<span class="yen">円/月</span></td>
    <td>5,000<span class="yen">円/月</span></td>
  </tr>
  <tr>
    <td><a href="#" class="button">申し込み</a></td>
    <td><a href="#" class="button">申し込み</a></td>
    <td><a href="#" class="button">申し込み</a></td>
  </tr>
  <tr>
    <td>ずっと無料</td>
    <td>お試し期間1ヶ月</td>
    <td>お試し期間1ヶ月</td>
  </tr>
</table>

CSSは以下のように記述します。

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 450px;
  margin: 40px auto;
  font-size:12px;
  line-height: 1.6;
}
th, td {
  padding: 10px 0;
  border-right: solid 1px #ccc;
  border-left: solid 1px #ccc;
  text-align: center;
}
table th:nth-of-type(1) {
  background-color: #aaa;
}
table th:nth-of-type(2) {
  background-color: #66ccff;
  color: #fff;
}
table th:nth-of-type(3) {
  background-color: #ea5506;
  color: #fff;
}
table tr:nth-of-type(2) {
  font-size: 30px;
}
.yen {
  display: block;
  font-size: 12px;
}
table tr:last-of-type {
  border-bottom: solid 1px #ccc;
  color: #ccc;
}
.button {
  background-color: #25b327;
  padding: 5px 20px;
  text-decoration: none;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}

各プランの見出しになる部分の背景色をそれぞれ変更しています。

セルの枠線は、上下の枠線は指定せず、左右のみに適用させました。

他にもプランの内容や特典など、列の情報を増やしていくことができますね。

見出しに矢印を装飾するデザイン

見出しに矢印をつけて目立たせるデザインを紹介します。

<table>
  <tr>
    <th>社名</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>設立</th>
    <td>2005年9月</td>
  </tr>
  <tr>
    <th>従業員数</th>
    <td>200名</td>
  </tr>
  <tr>
    <th>TEL</th>
    <td>000-000-0000</td>
  </tr>
</table>

CSSは以下のように記述します。

table{
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}
tr{
  border-bottom: solid 2px #fff;
}
tr:last-of-type{
  border-bottom: none;
}
th{
  position: relative;
  width: 30%;
  padding: 10px 0;
  background-color: #00ac97;
  color: #fff;
  text-align: center;
}
th:after{
  display: block;
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right:-20px;
  border: 10px solid transparent;
  border-left: 10px solid #00ac97;
}
td{
  width: 70%;
  background-color: #eee;
  text-align: center;
}

疑似要素である「:after」を使って、矢印の三角部分を作成しています。

要素の上下左右の枠線に透明を指定し、左側の線にのみ色を付けています。

要素のサイズ自体は0となっているので、1辺だけ枠線を表示させることで三角が表示できるわけですね

サイトのデザインに合わせて、三角の大きさや色をアレンジしてみてくださいね。

まとめ：ますはシンプルな表を作ってみよう

今回は、table要素を使って表を作成する方法を解説してきました。

CSSを使った基本的なデザインの仕方やサンプルコードも紹介しましたね。

様々な要素や属性が出てきますが、まずは基本的な構成要素を覚えてシンプルな表を作成してみましょう。

今回の記事が参考になれば幸いです。