Web上のテーブルデザインパターン

テーブルは、行と列に大量のデータを表示するためのデザインパターンであり、カテゴリオブジェクトの比較分析を効率的に行うことができます。 テーブルは早くも²世紀にこの目的で使用され、世界がデジタル化を始めたとき、テーブルが私たちと一緒に登場しました。

Webが表形式でのデータの表示をサポートすることは避けられませんでした。 HTMLテーブルは、意味的かつ構造的に適切な方法で表形式のデータを表示します。 ただし、HTMLテーブルのデフォルトのスタイルは、これまでに見た中で最も見た目に美しいものではありません。 必要なビジュアルデザインに応じて、これらのテーブルを美しくするために、CSSの前面でいくらかの努力が必要でした。 10年前、「トップ10 CSSテーブルデザイン」の記事がSmashing Magazineに掲載されましたが、今日でも多くのトラフィックを獲得しています。

Webは過去10年間で大きく進化しており、サイトまたはアプリケーションを表示されているビューポートに適合させることがこれまでになく便利になっています。とはいえ、妥協しない設計上の選択を継続する必要があります。アクセシビリティ。 テーブルがすぐに人気を失うことはないようですので、2019年にウェブ上でテーブルを作成する方法を見てみましょう。

CSSのみのオプション

データセットがそれほど大きくなく、ページネーションや並べ替えなどの機能が必要ない場合は、JavaScriptを使用しないオプションを検討してください。 大規模なライブラリの重みを追加しなくても、画面サイズの全範囲でうまく機能する非常に優れた結果を得ることができます。

残念ながら、アクセシビリティの面でいくつかのDOM操作のためのJavaScriptの助けがなければ、CSSのみのオプションはほんの一握りしかありません。 しかし、小さなデータセットの場合、多くの場合、それらで十分です。

オプション1：何もしない

まず、労力の少ないシナリオから始めます。 データが数列と多数の行しかないテーブルに収まる場合、そのようなテーブルはほとんどモバイル対応です。

おそらく、広い画面ではスペースが大きすぎるという問題があるため、狭い画面では必要に応じて縮小させながら、テーブルのmax-width幅を最大幅で「キャップ」することをお勧めします。

この種のパターンは、データ自体が行やテキスト行ではない場合に最適に機能します。 それらが数値または短いフレーズである場合、おそらく多くのことをしなくても逃げることができます。

オプション2：スクロールのスタイルを設定する

David Bushellは、2012年にレスポンシブテーブルの手法を作成しました。これには、オーバーフローを呼び出し、ユーザーがスクロールしてより多くのデータを表示できるようにすることが含まれていました。 これは正確に応答性の高いソリューションではないと主張する人もいるかもしれませんが、技術的には、コンテナはビューポートの幅に応答しています。

まず、「基本的な」オーバーフローを見てみましょう。 スクロールする影のスタイリングは他の何物でもないので、ベーシックの周りにエアクオートを使用していると想像してみてください。 それでも、この場合、「基本」とは、テーブルがまったく変換されないという事実を指します。

スクロールシャドウを作成するためのこのテクニックは、RomaKomarovとLeaVerouがお互いのアイデアをリフして魔法を作成することから生まれました。 これは、含む要素の背景画像として複数のグラデーション（線形および放射状）を使用し、 background-attachment: localを使用して、コンテンツに対して背景を配置することに依存します。

この手法の優れている点は、シャドウのスクロールをサポートしていないブラウザーの場合でも、通常どおりにテーブルをスクロールできることです。 レイアウトを壊すことはありません。

別のスクロールオプションは、 <tbody>要素のコンテンツに水平スクロールを適用しながら、テーブルヘッダーを行構成から列構成に反転することです。 この手法では、Flexboxの動作を利用して、テーブルの行を列に変換します。

display: flexをテーブルに適用することにより、 <thead>と<tbody>の両方がフレックスの子になります。これらはデフォルトで同じフレックスライン上に隣り合って配置されます。

また、 <tbody>要素をフレックスコンテナにし、その中のすべての<tr>要素を単一のフレックスラインに配置されたフレックスの子にします。 最後に、すべてのテーブルセルでは、デフォルトのtable-cellではなく、表示をblockに設定する必要があります。

この手法の利点は、固定ヘッダー効果のようにヘッダーが常に表示されるため、ユーザーがデータの列をスクロールするときにコンテキストを失うことがないことです。 注意すべき点の1つは、この手法では視覚的な順序とソースの順序に不一致が生じ、これにより物事が少し直感的でなくなることです。

いくつかのJavaScriptを振りかける

前述のように、 display値を変更してテーブルをモーフィングすることを含むレイアウトオプションは、アクセシビリティに悪影響を与える場合があり、修正するためにいくつかのマイナーなDOM操作が必要になります。

さらに、Andrew Coyleのデータテーブルの設計に関しては、ページネーション、並べ替え、フィルタリングなどの機能（有効にするためにJavaScriptが必要な機能）など、ユーザーエクスペリエンスのヒントがいくつかあります。

比較的単純なデータセットを使用している場合は、これらの機能のいくつかに独自の関数を記述したいと思うかもしれません。

アクセシビリティ修正を使用したブロックへの行

私の知る限り、このレスポンシブデータテーブルの手法は、2011年にChrisCoyierが作成したCSS-Tricksの記事「ResponsiveDataTables」から生まれました。それ以来、他の多くの人々によって採用および拡張されています。

この手法の要点は、メディアクエリを使用して、テーブル要素とその子の表示プロパティを切り替えて、狭いビューポートでblockすることです。

狭い画面では、テーブルヘッダーは視覚的に非表示になっていますが、ユーザー補助ツリーには引き続き存在します。 テーブルセルにデータ属性を適用することで、ラベルの内容をHTMLに保持しながら、CSSを介してデータのラベルを表示できます。 マークアップとスタイルがどのように見えるかについては、以下のCodePenを参照してください。

元の方法では、ラベルテキストを表示する疑似要素に幅を適用しますが、これは、ラベルを最初に必要とするスペースの量を知る必要があることを意味します。 上記の例では、わずかに異なるアプローチを使用しています。これにより、ラベルとデータはそれぞれ、含まれているブロックの反対側にあります。

このような効果は、フレックスフォーマットのコンテキストでの自動マージンを介して実現できます。 各<td>要素のdisplayプロパティをflexに設定すると、疑似要素は元の要素の直接の子であるかのようにボックスを生成するため、 <td>のflexの子になります。

その後、 margin-right: autoにすると、セルのコンテンツがセルの遠端にプッシュされます。

狭いビューポートレイアウトを実行する別のアプローチは、グリッドとdisplay: contents 。 現在、サポートしているブラウザのdisplay: contentsにはアクセシビリティの問題があり、これらのバグが修正されるまで、この方法を本番環境で使用しないでください。

しかし、これらのバグが解決された後にこれを読んでいる可能性があります。その場合は、別のレイアウトオプションがあります。

各<tr>要素はdisplay: gridに設定され、各<td>要素はdisplay: contentsに設定されます。 グリッドコンテナの直接の子のみがグリッドフォーマットコンテキストに参加します。 この場合、それは<td>要素です。

display: contentsが<td>に適用されると、そのコンテンツに「置き換え」られます。この場合、疑似要素と<td>内の<span>が代わりにグリッドの子になります。

このアプローチで私が気に入っているのは、 max-contentを使用して疑似要素の列のサイズを設定できることです。これにより、列に幅の値を手動で割り当てることなく、列が常に最長のラベルの幅になります。

将来的には、 min-content 、 max-content 、 fit-contentのサイジング値（CSS Intrinsic＆Extrinsic Sizing Module Level 3でカバー）が一般的なwidthとheightの値としてサポートされるようになると、敷設のオプションがさらに増えます。物事を出します。

このアプローチの欠点は、テーブルセルのコンテンツにまだ<span>または<p>がない場合は、その周りに追加<span>または<p>が必要になることです。そうでない場合、スタイルを適用する方法がありません。

単純なページ付け

この例は、divではなくテーブル行でページ付けするようにGjoreMilevskiによってこのCodePenから変更された基本的なページ付けの実装を示しています。 これは、前のセクションで説明した「スクロールのスタイル」の例の拡張です。

レイアウトの観点から、Flexboxは、さまざまなビューポートサイズにわたってページネーション要素を配置するのに非常に便利です。 プロジェクトの設計が異なれば要件も異なりますが、Flexboxの汎用性により、それに応じてこれらの違いに対応できるはずです。

この場合、ページネーションはページの中央にあり、テーブルの上にあります。 前後に移動するためのコントロールは、広い画面ではページインジケーターの両側に配置されますが、狭い画面では4つすべてがページインジケーターの上に表示されます。

これを行うには、 orderプロパティをレバレッジします。 このプロパティはソースの順序を変更せず、画面での表示方法のみを変更するため、コンテンツの視覚的な並べ替えは常に考慮して行う必要があります。

簡単な並べ替え

この例は、テキストと数字の両方に対応するために、PeterNobleによってこのコードスニペットから変更された基本的な並べ替えの実装を示しています。

どの列が現在どのような順序でソートされているかを示す何らかのインジケーターがあると便利です。 これは、CSSクラスを追加することで実行できます。CSSクラスは、必要に応じてスタイルを設定できます。 この場合、インジケーターシンボルは、ターゲットヘッダーがクリックされたときに切り替えられる疑似要素です。

簡単な検索

この例は、各テーブルセルのすべてのテキストコンテンツを反復処理し、CSSクラスを適用して、検索入力フィールドに一致しないすべての行を非表示にする基本的なフィルタリング機能です。

このような実装は比較的単純であり、ユースケースで必要な場合は、代わりに列ごとに検索する方が理にかなっている場合があります。 そのシナリオでは、各入力フィールドをテーブルの一部としてそれぞれの列に配置することをお勧めします。

図書館に任せましょう

上記のJavaScriptスニペットは、大量のデータを含むテーブルを拡張して、それらのテーブルのユーザーの生活を楽にする方法を示すのに役立ちます。 ただし、データセットが非常に大きい場合は、既存のライブラリを使用して大きなテーブルを管理するのが理にかなっている可能性があります。

列トグルパターンは、重要でない列が小さい画面に非表示になるパターンです。 通常、ビューポートが狭いという理由だけでコンテンツを非表示にするのは好きではありませんが、フィラメントグループのマギーコステロワックスによるこのアプローチは、ユーザーが非表示の列を元に戻すことができるドロップダウンメニューを提供することで、私の問題を解決します。見る。

上記の記事は2011年に公開されましたが、Filament Groupはその後、並べ替え、行選択、国際化などの機能を含む、Tablesawと呼ばれるレスポンシブテーブルプラグインの完全なスイートを開発しました。

TableSawの列トグル機能も、元の記事の例とは異なり、jQueryに依存しなくなりました。 Tablesawは、現時点でjQueryに依存していないことがわかった唯一のライブラリの1つです。

まとめ

そこには無数のテーブルデザインパターンがあり、どのアプローチを選択するかは、データの種類とそのデータの対象読者に大きく依存します。 結局のところ、テーブルはデータを整理して表示するための方法です。 どの情報がユーザーにとって最も重要であるかを把握し、ユーザーのニーズに最適なアプローチを決定することが重要です。

参考文献

• 「CSSのみのレスポンシブテーブル」、David Bushell
• 「アクセシブルでシンプルなレスポンシブテーブル」、Davide Rizzo、CSS-Tricks
• 「レスポンシブテーブルレイアウト」、マットスミス
• 「レスポンシブパターン：テーブル」、ブラッドフロスト
• 「ねえ、それでもテーブルを使用しても大丈夫です」とエイドリアン・ロゼリ
• 「テーブル、CSS表示プロパティ、およびARIA」、Adrian Roselli
• 「データテーブル」、ヘイドンピカリング