webmanab.html

table 要素を使用している。参考にしたいアイデアや美しいものをピックアップして紹介し、まとめていきます。

テーブルを固定する

列や行を固定し、中身の情報だけをスクロールさせる要件の時に参考にしたいまとめです。

table-idea01

特定の列と行が固定される使用になっており、なめらかにスクロールします。
ヘッダ部分は収縮しコンパクトになり、必要なものや比較したい対象のみを表示させるソート機能を実装しています。

カード型などプライスリスト(料金表)のデザイン・レイアウトテクニックも多様化してきました。

PricingTablesInspiration

ミニマルなインタラクションとデザインで可読性にがいいインスピレーション集。

おわります。