不思議なことに、マスターするのが最も難しいWebテクノロジーのXNUMXつは、プレーンテキストと画像の後にブラウザーで使用できる最も早いもののXNUMXつです。 考慮が必要な非常に多くの異なるデバイスタイプがあるため、今日の問題はさらに深刻です。
問題が発生する可能性が低いアイテムが非常に少ない場合を除いて、完全なテーブルを作成することはほぼ不可能です。 発生する可能性のあるエラーの種類は次のとおりです。
- テキストの折り返しが正しくない
- 正当化エラー
- 画面外のテーブルレンダリング
- スクロールの問題
- 行の高さエラー
- 列幅エラー
- 一般的な醜さまたはだらしない
この記事では、このような問題を回避する方法について説明します。そのため、テーブルが良い印象を与える可能性が最も高くなります。
回避する回避戦略
テーブルを正しく設定するのは非常に難しいため、テーブルの使用を避けようとする人もいます。 いくつかの一般的な戦略は、CSSを使用して偽のテーブルを作成し、データテーブルのイメージをコードに実装せずに使用することです。
これらの回避戦略には欠点があり、回避する必要があります。 CSSを使用してテーブルを模倣すると、テーブルに固有のセマンティック構造が欠け、使いやすさとアクセシビリティの問題が発生する可能性があります。
テーブルの画像は、概要に記載されている問題には影響しませんが、SEOの可能性を低下させ、データを更新する必要がある場合は簡単に変更できません。 また、ユーザビリティとアクセシビリティの問題も紹介します。
フレームワークはあなたの友達です
BootstrapやFoundationなどの一般的なフレームワークには、多くの時間節約ツールが含まれており、テーブルも例外ではありません。 Bootstrapで上品な外観のテーブルを構築することは難しくありませんが、努力にオーダーメイドの調整を追加せずにラックを構築するだけの場合、いくつかの制限が伴います。
外見はすべてではありません
コンテンツとスタイルは常に独立している必要があるため、特別なテーブルスタイルが適用される前に見栄えをよくするために、最初にプレーンHTMLでテーブルを作成することは理にかなっています。
これは、優れたテーブルを構築するには、テーブルの見栄えを良くするだけでは不十分であることを思い出させるのにも役立ちます。 それはまた有用であるべきですformatイオンデリバリーシステム。 テーブルの目的が伝えることではない場合formatその場合、何をしていてもテーブルを使用するべきではありません。
アクセシビリティを目指す
一部の人々は印刷されたテキストを見たり読んだりするのが難しいので、テーブルにアクセスできるようにすることをお勧めします。 あなたはあなたのテーブルをよりアクセスしやすくするためにあなたが知る必要があるすべてを見つけることができます WebAIIM.
テーブルコンポーネントにID値を与えることを検討してください
テーブルの各部分（行、セル）を最大限に制御するには、次の場所にそれらを与えることを検討できます。diviデュアルID値。 クラス値も追加すると、さらに柔軟性が高まります。
これらのことを行うと、多くの作業が必要になるため、参照によって項目を微調整できるようにする必要がある場合にのみ実用的です。 これを行うことを決定した場合、JavaScriptとCSSを使用して任意のテーブルアイテムを直接操作できます。
テーブル作成の複雑さのXNUMXつは、行ではなく列を宣言することです。 列は動的に作成され、各行に配置するデータ項目の数に従って計算されます。 これが、テーブルがページの読み込み時間に追加する理由です。
事実上、列はページがレンダリングされる前に抽象的な意味でのみ存在することを意味するため、列にいかなる種類の参照も与えることはできません。 行の最初のTDアイテムに、たとえば「firstCol」のクラスを与えることにより、列を直接参照する方法を提供します。
コンパクトなテーブルが最適
大きくて視認性の高いコンポーネントを使用してすべてを構築することがファッショナブルになっています。 アクセシビリティの観点からは、これは素晴らしいことです。 ただし、使いやすさの点では、問題が発生する可能性があるため、常に最良の方法であるとは限りません。
Bootstrapの開発者は実験しました responsive テーブル、しかしテーブルと responsiveネスは一緒にうまくいきません。 テーブルを最初からデザインして、ポートレートモードのモバイル画面に収まるようにするのは賢明な方法です。
テーブルは常にスクロール可能である必要があります
テーブルのオーバーフロー値は常にautoに設定することをお勧めしますが、テーブル自体には設定しないでください。 代わりに、次のようなdiv内でテーブルをラップします。
次に、テーブル本体を構成する多くのPHPコードがあり、これで終了します。
テーブルをスクロール可能にする作業を行う部分は最初の行にあり、テーブルラップdivには固定の高さが与えられ、オーバーフロー値はautoに設定されています。 これをテーブルのラッパーではなくテーブル自体に対して行うと、意図しない影響が生じる可能性があります。
あなたがする必要がある場合はヘビーヒッターを呼び出します
単純なテーブルの場合、これはやりすぎですが、調整可能な列幅や列の並べ替えなどの利点を本当に必要とするテーブルがある場合、複雑なテーブルを構築するタスクを支援するために構築された強力なjQueryアプリケーションがいくつかあります。
WordPressサイトにしたい最も印象的なオプションは wpDataTables、WordPressテーブル plugin これにより、表、グラフ、およびデータ管理の作業が簡単になります。 それを使って、あなたは作成することができます responsive WordPressの表とチャート。
plugin 最大数百万行の大きなテーブルで非常に高速に動作しますが、ExcelやGoogleスプレッドシートの場合とほぼ同じように、テーブルに対して多くのカスタマイズやフィルタリングを行うこともできます。
最大かつ最も可能性が高いのは フレキシグリッド。 これは、Java Swingテーブルに似た外観で、同じように機能します。
Flexigridの機能はあなたが必要とするものには多すぎるかもしれないので、この場合あなたは検討することができます テーブルソーター、これはかなり簡単です。
これらの種類のツールの機能はエキサイティングですが、ページの読み込み時間をさらに長くすることが重要です。 あなたが本当にそれを持っている必要があるときのためにこの種のものを保存するのが最善です。
自動化された変換ツールは通常、最良の結果をもたらしません
ドキュメントテーブルをHTMLテーブルに変換できるCMSプラグインがあります。 これらは手動でテーブルを手動で作成するほど優れているわけではないため、優れた結果が必要な場合は、この種の自動化は適切ではありません。
あなた自身の自家製の自動化は問題ありませんが
PHP を使用してデータベースからテーブルを構築するformatイオンは常に良いアイデアであり、すべてを手動で入力するよりも間違いなく望ましいです。 ここでの違いは、自動化の仕組みを完全に制御できることです。
サードパーティの自動化を使用する場合、サードパーティの作成者はテーブルについて想定する必要があります。 つまり、自分でテーブルを作成する場合と比較して、多くの機能が不足している可能性のある汎用テーブルが作成されることになります。
テーブルを適切に使用すると、報酬が与えられます
良いテーブルは設計されたものであり、ただ起こるだけではありません。 インをデザインするときformatイオンデリバリーシステムを効率的かつ効果的にしたい。 テーブルがまさにそのように設計されていることを確認してください。そうすれば、サイトはそれらを含めることで最大限の利益を得ることができます.
ヘッダー画像提供
コメント 0応答