web-dev-qa-db-ja.com

テーブルヘッダー:大文字または小文字、左または中央揃え、上または下?

テーブルヘッダーをスタイル設定するための標準的な方法または少なくとも素晴らしい方法があるかどうかを知りたいですか?

大文字または小文字?左または中央?上部または下部?

ありがとう

3
NathanWay

アラインメントは、表示しているデータと、ユーザーにすばやく把握してもらいたい内容によって異なります。

大文字または小文字?

Miles Tinker's研究(32年の研究!)は、大文字と小文字の単語の読みやすさを検討しました。

NCBIでの調査研究から、ティンカーの観察を引用する要約:

通常および低視力での大文字と小文字の読みやすさ

読みやすさとタイポグラフィの権威であるMiles Tinker氏は、次のように述べています。「形状のバリエーションや、短い文字とアセンダーとディセンダーの対照性の点で、小文字の方が「文字」が多くなります。これは、すべての大文字の単語よりもはるかに読みやすい特徴的な単語の形につながります。」

テーブルデザイン:

かなり高度なフレームワークがいくつかあります。

Material Design table specsセンテンスケースヘッダーを使用し、数値データを含む列のヘッダーを右揃えしているようです。データを右揃えすると(列ヘッダーに関係なく)、並べ替えた比較が容易になります。

enter image description here

Bootstrap文の大文字小文字の区別、左揃え標準のように見えます。

enter image description here

Salesforce Lightningヘッダーはすべて大文字であり、数値データのある列では右揃えされていないようです。

enter image description here

Zurb Foundation左揃えでヘッダーに背景の陰影を付けます。

enter image description here

フレームワークに関係なく1つの一般的な観察は、テーブルヘッダーは、ほとんど常に何らかの方法でコンテンツから区別できるということです。これは次の方法で実現できます。

  • フォントの太さ
  • 背景の行の色

配置:ヘッダーを左揃えのテキストで中央揃えしないでください。目が必要以上の仕事をさせないでください。

enter image description here

5
Mike M