質問: htmlテーブルに最適なui。 私は頻繁に表形式のデータを表示する必要があり、すべての魔法が必要です。 。 。列の並べ替え、ページ分割など。列の名前をクリックしてユーザーに対して並べ替えが行われる列を使用することをお勧めします(通常はjavascriptを使用しますが、ページネーションも行うと、画面、またはその列で並べ替えてから、最初のページに戻しますか?)しかし、ソートされていることをどのように示すのですか?そのための良いuiヒントは何ですか?列名はどのように見えるべきですか?また、私は他のすべての結果をグレーで色付けしたいのですが、画面が明るすぎて誰かが行を識別できるほどグレーではありませんが、グレーの量を増やすと表示されません黒いテキストを快適に読むのに十分なコントラスト。正しく行われたテーブルの例は何ですか?
回答: 画面上のデータだけでなく、テーブル全体のデータをソートします。はい、新しい並べ替え順序の1ページ目から開始する必要がありますが、それでも問題ありません。idで並べ替えていて、10ページで姓で並べ替えることにした場合、意味がわかると思いますか。 並べ替えられている列のテーブルヘッダーセルの背景を強調表示して、並べ替えられていることを示します。さらに進んで、列全体を強調表示できます。矢印を使用すると、さらにわかりやすく(アクセスしやすく)なります。たとえば、並べ替えられていない場合は右向きの矢印、並べ替えられた場合は下向きの矢印です。 列名は、単に列名として区別できる必要があります。表のセルのコンテンツよりも少し大きく太くする傾向があります。 個々の行のスキャン可能性を高めるために必要な場合にのみ、他のすべての結果に灰色を付けます。それがあなたが設計しているものであるならば、ユーザーが読んでいるのではなくスキャンしているので、全体的な読みやすさをわずかに減らすトレードオフは問題ありません。そして、最終的には、すべての画面の明るさに対して設計することは不可能です。そのため、満足できるメディアを選択し、それを守るようにしてください。 現時点ですぐに使用できる例はありませんが、上記のアドバイス/設定に従っている、私のwebアプリ用に設計したテーブルの例を次に示します。