【初心者でも簡単!】HTMLのテーブルを見やすくする方法



【初心者でも簡単!】HTMLのテーブルを見やすくする方法

たくさんの情報を一目で理解しやすい形にまとめられる、表(テーブル)。Webサイトでもよく使われていますが、実際に書いてみるとなんだかダサい・・・。

今回は、そんなテーブル初心者さんもスグに使える、テーブルの見た目を調整する方法を紹介します!

目次
  1. HTMLのテーブル(表)とは?
  2. テーブルとは
  3. テーブルを使う際に使用するタグ
  4. 実際にテーブルを作ってみよう
  5. テーブルの行の高さを変える
  6. テーブルの列の幅を変える
  7. テーブルの枠線を変える
  8. 設定例
  9. デザインをもうひと工夫してみよう!
  10. スタイルシートへテーブルのデザイン設定をまとめる
  11. セルの色を変える
  12. ヘッダ固定&スクロール機能をつける
  13. デザインに悩んだら
  14. まとめ

HTMLのテーブル(表)とは?

テーブルとは

あらためてHTMLのテーブル(表)について確認してみましょう。HTMLのテーブルは、 図のように 行、列、セル で構成されています。 image

テーブルを使う際に使用するタグ

行を表すタグはTR(Table Row)、セルを表すタグはTD(Table Data)です。

テーブルタグは、大文字でも小文字でもどちらでも構いません。<TD>も<td>でも同じ結果です。

テーブルに使用する主なタグ
タグ用途説明
<table>〜</table>テーブル囲まれた部分が表であることをあらわす
<tr>〜</tr>囲まれた部分が一行であることをあらわす
<td>〜</td>セル囲まれた部分が一つのデータ(表のひとマス)であることをあらわす
<th>〜</th>項目名項目名のセルに使用する
<caption>〜</caption>キャプション表の説明文に使用する
(この表では、「テーブルに使用する主なタグ」の部分がそうです)

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

先ほどのタグを使って、実際にテーブルを作ってみましょう!

CodeCamp マスタープラン比較表
料金(税抜) レッスン回数 受講期間
2ヶ月プラン 148,000円 20回 60日間
4ヶ月プラン 248,000円 40回 120日間
6ヶ月プラン 298,000円 60回 180日間

上のテーブルを表示するためのHTMLは、このように書いています。

<table>
<caption>CodeCamp マスタープラン比較表</caption>
 <tr>
    <th></th>
    <th>料金(税抜)</th>
    <th>レッスン回数</th>
    <th>受講期間</th>
  </tr>
  <tr>
    <td>2ヶ月プラン</td>
    <td>148,000円</td>
    <td>20回</td>
    <td>60日間</td>
  </tr>
  <tr>
    <td>4ヶ月プラン</td>
    <td>248,000円</td>
    <td>40回</td>
    <td>120日間</td>
  </tr>
  <tr>
    <td>6ヶ月プラン</td>
    <td>298,000円</td>
    <td>60回</td>
    <td>180日間</td>
  </tr>
</table>

テーブルタグの改行のしかたに決まりはありませんが、tableとtrとtdごとに、タブや空白を使って字下げをしておくのをおすすめします。後で修正する時にもとてもわかりやすいですよ。

テーブルの行の高さを変える

テーブルの行の高さは、heightプロパティを使ってこのように設定します。

<tr height="100px">

height=で示した数字の大きさに行の高さが設定されます。pxやemなどの単位を使って記載します。heightプロパティは、tdに記載してセルの高さの設定に、tableタグに記載してテーブル全体の高さの設定にも使用できます。

テーブルの列の幅を変える

テーブルの列の幅は、widthプロパティを使ってこのように設定します。

<td width="100px">

widthプロパティは、tableタグにも設定することができます。tableタグに設定してテーブル自体の幅を変更することもできます。

テーブルの枠線を変える

テーブルの枠線は、borderプロパティで設定します。

<tr style="border:1px dashed red">

線幅、線の種類、色を順番に記述します。個別に設定したい場合は以下のプロパティを使用することができます。

枠線を設定するためのプロパティ
プロパティ用途使用例
borderまとめて設定する style="border:1px solid #000000"
線幅、線の形状、色
border-style線の形状を設定する none表示されない
solid1本の線
double2重線
dashed破線
dotted点線
border-width線の太さ style="border-width:1em"
pxやemを使って設定する
border-color線の色 style="border-color:red"
style="border-color:#ff0000"
border-top
border-right
border-left
border-bottom
上、右、左、下の
枠線のプロパティを
それぞれ設定する
style="border-top:1px dotted #ff0000"

設定例

ここまで出てきたプロパティで、表の見た目を変更してみました。どうでしょうか。

CodeCamp マスタープラン比較表
料金(税抜) レッスン回数 受講期間
2ヶ月プラン 148,000円 20回 60日間
4ヶ月プラン 248,000円 40回 120日間
6ヶ月プラン 298,000円 60回 180日間

HTMLでの記載は以下のようになっています!

<table  style="border:2px dashed #ff0000">
<caption>CodeCamp マスタープラン比較表</caption>
 <tr height="25px" width="200px">
    <th></th>
    <th>料金(税抜)</th>
    <th>レッスン回数</th>
    <th>受講期間</th>
  </tr>
  <tr>
    <td>2ヶ月プラン</td>
    <td>148,000円</td>
    <td>20回</td>
    <td>60日間</td>
  </tr>
  <tr>
    <td>4ヶ月プラン</td>
    <td>248,000円</td>
    <td>40回</td>
    <td>120日間</td>
  </tr>
  <tr>
    <td>6ヶ月プラン</td>
    <td>298,000円</td>
    <td>60回</td>
    <td>180日間</td>
  </tr>
</table>

デザインをもうひと工夫してみよう!

幅や枠線は変更できましたが、もうひと工夫して、見栄えのよいテーブルにしてみましょう!

さて、これまではテーブルタグに直接プロパティを記載していましたが、実は推奨されている書き方ではありません。HTMLのテーブルをデータだけにしてスッキリさせるためや、のちのち見た目を一気に修正したくなった場合のために、CSS(スタイルシート)上にデザインの設定はまとめてしまいましょう!

スタイルシートへテーブルのデザイン設定をまとめる

さきほどの表の設定をCSSへまとめるとこのように記述できます。

CodeCamp マスタープラン比較表
料金(税抜) レッスン回数 受講期間
2ヶ月プラン 148,000円 20回 60日間
4ヶ月プラン 248,000円 40回 120日間
6ヶ月プラン 298,000円 60回 180日間

HTMLでの記述はこのようになっています!

<style>
table.aa {
 border: 2px dashed #ff0000;
}

table.aa tr.bb {
 height: 25px;
 width: 100px;
}
</style>

<table class="aa">
<caption>CodeCamp マスタープラン比較表</caption>
 <tr>
    <th></th>
    <th>料金(税抜)</th>
    <th>レッスン回数</th>
    <th>受講期間</th>
  </tr>
  <tr  class="bb">
    <td>2ヶ月プラン</td>
    <td>148,000円</td>
    <td>20回</td>
    <td>60日間</td>
  </tr>
  <tr>
    <td>4ヶ月プラン</td>
    <td>248,000円</td>
    <td>40回</td>
    <td>120日間</td>
  </tr>
  <tr>
    <td>6ヶ月プラン</td>
    <td>298,000円</td>
    <td>60回</td>
    <td>180日間</td>
  </tr>
</table>

スタイルシートについて詳しくは、弊社記事も読んでみてくださいね。
【初心者向け】CSS入門者のために書き方を分かりやすく解説!
【初心者向け】CSSを概要から書き方のサンプルまで詳しく解説

セルの色を変える

次は、セルの色を変更してみましょう。セルの背景色を設定するのは、background-colorプロパティです。

background-color: #gray;
background-color: #00ff00;

tdのプロパティではセルごと、trのプロパティに設定すると行ごと背景色を変更することができますよ。

ヘッダ固定&スクロール機能をつける

情報の多いテーブルでも、デザインを崩したくない、改行を避けたいという場合に使えると便利なのがスクロール。CSSを使ったスクロールの機能を紹介します。

CodeCamp 学習可能な言語
言語プレミアムプラスWebマスターデザインマスター
HTML/CSS
JavaScript
Bootstrap
Swift
Android
PHP
MySQL
Ruby
Ruby on Rails
Java基礎
Java応用
Javaサーブレット
Photoshop
illustrator

スタイルシートでヘッダー部分を固定し、tboby(テーブルのデータ部分)に表示があふれる場合はスクロールをする、という設定をしています。すると、スクロールバーが表示されるようになります。

<style>
/* ヘッダーとデータ部分の設定 */
thead.sc , tbody.sb{
  display:block;
  font-size:0.5em;
}

/* 溢れたらスクロール */
tbody.sb {
  overflow-y:scroll;
  height:100px;
}

table.cc td,th{
  table-layout:fixed;
}

table.cc .dd{
  width:200px;
}
table.cc .ee{
  width:50px;
}
</style>

<table class="cc">
<caption>CodeCamp 学習可能な言語</caption>
  <thead class="sc">
    <tr><th class="dd">言語</th><th class="ee">プレミアムプラス</th><th class="ee">Webマスター</th><th class="ee">デザインマスター</th></tr>
  </thead>

  <tbody class="sb">
  <tr>
    <td class="dd">HTML/CSS</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
  </tr>
  <tr>
    <td class="dd">JavaScript</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
  </tr>
  <tr>
    <td class="dd">Bootstrap</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee">○</td>
  </tr>

  <tr>
    <td class="dd">Swift</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Android</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">PHP</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">MySQL</td>
    <td class="ee">○</td>
    <td class="ee">○</td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Ruby</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Ruby on Rails</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Java基礎</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Java応用</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Javaサーブレット</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee"></td>
  </tr>

  <tr>
    <td class="dd">Photoshop</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee">○</td>
  </tr>

  <tr>
    <td class="dd">illustrator</td>
    <td class="ee">○</td>
    <td class="ee"></td>
    <td class="ee">○</td>
  </tr>

  </tbody>
</table>

デザインに悩んだら

なかなかゼロからセンスのいいテーブルを作るのは難しいものですね。そんなときは、プロの方や有志の方が公開されているテンプレートも参考にしましょう!お仕事で利用される場合は、利用条件なども確認してくださいね。

弊社サイト 【決定版】CSSで実装できる綺麗なテーブルデザイン10選まとめ image

画像出典:CodeCamp

コトダマウェブ オシャレなTableデザインサンプル15点 image

画像出典:コトダマウェブ

LIG HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点 image

画像出典:LIG

まとめ

ブログやWebサイトでは、表を使うと多くの情報をわかりやすくまとめることができ、読者にも喜ばれますよ。読みやすく役に立つサイトをめざして、HTMLのテーブルを効果的に使いましょう!

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp