html＆cssを用いて見やすいテーブルを作成する

普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。例えばよくテーブルが使用される部分としては、会社概要や料金プランなどがあります。
図１　テーブルの使用例

テーブルはいくつかの要素を比較したり、読者にコンパクトに情報を伝えることができるのでとても重宝されます。今回はサイトでよく見られるテーブルがどのようなHTML＆CSSで記述されているのか解説していきます。

1. htmlのみで、基本的なテーブルを作成する
2. 見やすいテーブルの作成例
3. まとめ

htmlのみで、基本的なテーブルを作成する

htmlのtableタグはテーブルを作成する際に使用します。ですが、tableタグのみでテーブルが形成されるのではなく、trタグやtdタグが必要です。まず、htmlタグのみで基本的なテーブルを作成してみました。例１を見てください。

例１のコード

<table>
        <thead>
            <tr>
                <td></td>
                <th scope="col">生年</th>
<!--「scope="col"」はこの見出しセルは下方向にあるセルと対応していることを示している-->
                <th scope="col">没年</th>
　　　　　　　　<th scope="col">出身地（旧国名）</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>織田信長</th>
                <td>１５３４年</td>
                <td>１５８２年</td>
<td data-label="出身地（旧国名）">尾張国</td>
            </tr>
            <tr>
                <th>真田幸村</th>
                <td>１５６７年</td>
                <td>１６１５年</td>
<td data-label="出身地（旧国名）">信濃国</td>
            </tr>
<tr>
                <th>伊達政宗</th>
                <td>１５６７年</td>
                <td>１６３６年</td>
<td>出羽国</td>
            </tr>
        </tbody>
    </table>

見やすいテーブルには程遠いですが、簡単なテーブルを作ることができました。かなりの種類のhtmlタグが出てきたので、図を用いて整理したいと思います。以下の図を見てください。
図２　テーブルを作成する際に使用するhtmlタグ
テーブルにおけるhtmlの適用範囲
thタグとtdタグの違いに関してですが、thタグは見出しを示すのに対し、tdタグは通常の文を示します。また、テーブルの形式は用途によって変わってくるので、この形式が最適解であるとは限りません。ですので、さまざまなサイトのテーブルを研究してみるのも良いかもしれません。

基本的なテーブルはhtmlのみで作ることができますが、これだけでは読者が読みやすいテーブルとは言えません。そこで、ここからはhtmlだけでなくcssも活用しながら、読者が分かりやすいテーブルを作成していきます。

見やすいテーブルの作成例

cssを用いて、見やすいテーブルを作成する

まず、よく見かけるテーブルを作成するために主に以下のcssプロパティを適用します。
　　・セル同士の間にある枠線を引く→cssのborderプロパティ
　　・余白の調整→cssのpadding,marginプロパティ
　　・色を変更する→cssのcolor,background-colorプロパティ

その他のcssプロパティも、実際にテーブルを作成しながら調整しつつ、順次追加していくと良いでしょう。例２を見てください。
例２　cssを使ってテーブルの見栄えをよくする

HTMLは例１と同様

table {
/*ボーダー線を重ねて表示する*/
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}

table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
/*中央寄せ*/
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
}

かなりテーブルらしく、かつ見やすくなったと思います。

擬似クラスを用いて奇数行だけに色をつける

疑似クラスを用いることで、指定要素にcssを適用することができます。この方法を用いれば、テーブルの奇数行のみにcssを適用することができます。例３を見てください。

例３　疑似クラスを用いてテーブルを見やすくする

例３
HTMLは例１と同様

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}

table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
/*以下を追加*/
 table tbody td:nth-of-type(odd) {
       background-color: #EEEEEE;
}

このように疑似クラスを使用することで、セルごとの敷居がはっきりし、読者がよりテーブルを読みやすくなります。さらに行数の多いテーブルを作成する際にも、このように疑似クラスを使用すれば効率的にcssを適用させることができます。

疑似クラスに関して、詳しく知りたい方は以下のページを参考にしてください。
https://www.aiship.jp/knowhow/archives/31361

レスポンシブなテーブルを作る

例３までのテーブルではスマホで表示した際、テーブルの一部が画面から見えなくなってしまいます。多くの人がサイトをスマホで閲覧する現在において、このような状態を放置することは良くありません。

そこで、スマホのような小さい画面にも対応するテーブルを作成する必要があります。例４のページを開いて、PC版とスマホ版の両方で表示させてみてください。

例４　レスポンシブなテーブルを作成する

<!--data-labelを追加-->
<table>
        <thead>
            <tr>
                <td></td>
                <th scope="col">生年</th>
                <th scope="col">没年</th>
　　　　　　　　<th scope="col">出身地（旧国名）</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>織田信長</th>
                <td data-label="生年">１５３４年</td>
                <td data-label="没年">１５８２年</td>
<td data-label="出身地（旧国名）">尾張国</td>
            </tr>
            <tr>
                <th>真田幸村</th>
                <td data-label="生年">１５６７年</td>
                <td data-label="没年">１６１５年</td>
<td data-label="出身地（旧国名）">信濃国</td>
            </tr>
<tr>
                <th>伊達政宗</th>
                <td data-label="生年">１５６７年</td>
                <td data-label="没年">１６３６年</td>
<td data-label="出身地（旧国名）">出羽国</td>
            </tr>
        </tbody>
    </table>

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width:650px;
}
table tr {
 border: 1px solid #bbb;
}
table th,
table td {
    padding: 5px 10px 5px 5px;
  border-right: 1px solid #bbb;
  text-align: center;
}
table thead tr{
  background-color: #333333;
  color:white;
}
 table tbody td:nth-of-type(odd) {
       background-color: #EEEEEE;
}
/*以下を追加*/
@media screen and (max-width: 600px) {
  table {
    border: 0;
/*横幅１００％表示させる(重要）*/
    width:100%
  }
  table th{
    background-color: #333333;
    color: white;
    display: block;
/*右の不要なボーダー線を非表示に*/
    border-right: none;
  }
  table thead {
    display:none;
  }
  table tr {
    display: block;
    margin-bottom:20px;
  }
  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    text-align: center;
    position: relative;
    border-right: none;
  }
  table td::after {
    content: attr(data-label);
/*data-labelの値をcontent:attr()で取得し、その値を表示する*/
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
}

重要な点としては、tableタグのwidthを１００％にする点です。こうすることで、テーブルが常に横幅いっぱいに表示され、一部が画面から消えるという問題点が解消されます。

テーブルがデバイスによって最適な形に変化していることが分かると思います。このようにcssを適用させることによって、レスポンシブなテーブルを作成することができます。