はるなぴログ

ブログ・WEBサイト作成技術研究

CSSだけでtableを見やすく表示するカスタマイズ方法

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。

スマホ表示もレスポンシブ対応を含めて考えていきます。

tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較しているのか目立つようにします。

このカスタマイズでtableを更に見やすく表示しようという作戦です。

tableをどう表示するか

f:id:hal7pi:20181014091708j:plain

ブログを読むときに内容がtableで表にしてあると分かりやすいということが多いですよね。

列ごとの内容が簡単に比較できますから。

文字ばかりに頼った記述だと読者は疲れてしまいます。テーブル表示を織り交ぜることで読者が楽に内容を読み取ることができるようになります。

スマホ表示

一口にtable表示が分かりやすいと言っても良く考える必要があります。

あまりにも列の数が多いとスマホで表示した時が大変です。文字が小さく表示されてしまったり、あるいは折り返しがたくさんできてしまったり。

そこでCSSを使ってレスポンシブ対応とすることも可能です。

ですが、このレスポンシブ対応というのがtableを一列ごとに分解し縦に表示する方法ですと結局は列ごとの比較ができなくなってしまいます。

なので、はるなぴが考えるにtable表示はそもそも多列で表示しないようにする方が良いと思います。

どうしても一覧表示にして見せたいときは別ですが、そうでなければまずスマホでも見やすくなるように心がける方がいいです。

そのためにはtableを3列~4列程度に分割するというのもひとつの手です。

またあまりにも長い語句をテーブルに入れると折り返しができて読みにくくなってしまいます。特にスマホでは。これも注意するようにした方が良いですね。

レスポンシブ対応

はるなぴははてなブログテーマInnocentを使用しています。

このテーマを使えば、というか以下のようにtableの幅を100%指定すれば簡単なレスポンシブ対応になります。スマホでもPCでもテーブル幅を親ブロックいっぱいに表示してくれますから。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
}

このままでも良いのですが、更にテーブルのセルに枠線をつけて表示することを考えます。

tableに枠線をつけるCSS

以下のCSSを施します。

td, th {
  border: 1px solid #999;
  box-sizing: border-box;
  text-align: center
}

これでテーブルセルに枠線が表示され見やすくなります。

テーブルヘッダに背景色をつける

テーブルヘッダに背景色もつけてみましょう。

thに以下のCSSを施します。

th {
  background-color: #eee;
}

背景色はもっと鮮やかにしてもいいかもしれませんが、とりあえずこのくらいが落ち着いた感じで内容を邪魔しないかなとも思います。

マークダウン記法でtableを書く

マークダウン記法を使えばtableは驚くほど簡単に書くことが可能になります。

この前書いたテーマの比較表もマークダウン記法で書けばこのとおり。

|順位|テーマ|インストール数|投稿日|
|---|---|---|---|
|1|Minimalism|18,493|2017-06-16|
|2|Brooklyn|21,831|2016-02-04|
|3|Innocent|24,260|2015-12-20|
|4|ZENO-TEAL|6,318|2017-03-11|
|5|Haruni|2,515|2018-03-11|

とっても簡単に書けます。

順位 テーマ インストール数 投稿日
1 Minimalism 18,493 2017-06-16
2 Brooklyn 21,831 2016-02-04
3 Innocent 24,260 2015-12-20
4 ZENO-TEAL 6,318 2017-03-11
5 Haruni 2,515 2018-03-11

もうtableのHTMLべた打ちなんてしていられませんね!