web-dev-qa-db-ja.com

UIで標準のテーブルの代わりに表形式のデータを表示するいくつかの代替方法は何ですか?

UIで標準のテーブルの代わりに表形式のデータを表示するいくつかの代替方法は何ですか?行と列を含む正式なテーブルにデータを表示したくない。それらをすべてグループ化して魅力的で素晴らしいものにする方法はありますか?

34
Hemalatha

データが表形式の場合、テーブルを使用するべきでない理由はわかりませんか?結局のところ、table要素の全体的な目的は、そのようなタイプのデータを表示することです。

しかし、クエリが表形式のデータをより美しくする方法である場合は、この記事を読んでください http://darkhorseanalytics.com/blog/clear-off-the-table/

一言で言えば、色を削除し、グリッド線を削除し、タイプ(数値または文字列)に基づいてアイテムを整列させることにより、「Less is more」の原則に従います。

また、別の方法は、円グラフ、グラフバーなどのグラフィック要素を使用することです。

注:テーブルは旧式ではありません。しかし、要素のレイアウトにテーブルを使用することです。

44
Jigar

cards を使用してデータを表示することを検討しましたか?それらは、Googleのマテリアルデザインで非常に一般的になりつつあり、正しくスタイル設定されている場合、非常に魅力的です。

もちろん、カードに細部を配置しすぎることは「ルールに反すること」ですが、実行可能な代替策です。

便宜上、いつでもビューを変更してデータをテーブルに表示するボタンを提供できます。

9
Gareth

他のほとんどの人が以前に述べたことを裏付けるもう1つの有用な記事は、次のとおりです。 https://design-nation.icons8.com/intro-to-data-tables-design-349f5586180

特定のケースについて、さまざまな例を提供します。

1
RobbyReindeer

確かではありませんが、ユーザーが表形式でデータを表示し続けることを望んでいるため、データの周囲に境界線を表示することに関する質問のように思えます。その場合は、境界線を追加せずに表を使用してください。

ドレスアップする必要がある場合は、独自のCSSまたはCSSフレームワークを使用してください。

0
Allan