web-dev-qa-db-ja.com

見栄えの良いHTMLテーブルの例

私のアプリのすべてのテーブルはsh * tのように見えます、それは私が髪を失う原因になっています。できれば、たくさんの行とかなりの数の列を使ってください。

6
ryudice
7
Jitendra Vyas

上部にコメントとしていくつかのコレクションを追加しました。

コニー・マラメドが書いた人 グラフィックスを理解する は、効果的なデータテーブルの設計に関する人気のある記事を書きました。これは、私自身のやや長いリソースの視覚化と例を通して説明しました データテーブルの効果的な設計 。 Connieの元の記事は here です。

両方の記事で示したポイントは、表示することと表示しないことの重要性を検討することにより、独自のテーブルの見栄えを悪くするのではなく、理解するのに役立ちます。特に、デザインと空白のゲシュタルトの原則は、見栄えの良いテーブルの重要な要素です。

設計のヒントの概要は次のとおりです。

  1. 聴衆の期待に応える
  2. テーブルの目的に合わせてデータを注文する
  3. 混乱を取り除く
  4. 視覚的な階層を作成する
  5. 数値を丸めて質問を避ける
  6. ユーザーの計算を実行します
  7. 一貫した外観を提供する
  8. 揃える
  9. フィギュアとグラウンドを分離
  10. 列の数を減らす
  11. 比較を簡単にする
  12. 類似データをグループ化
  13. グリッドを有効活用
  14. 重要な値を強調表示します
  15. 簡単な口頭での解説を提供する
  16. 空白を使う
  17. 意味のあるラベルを使用し、見出しを管理する
5
Roger Attrill

この記事を強くお勧めします: 空白を使用した設計:なぜ1 + 1 = 3か

彼自身のブログのレイアウトを抽象化して、彼は非常に良い点を持っています。

0
Ricardo Tomasi