エクセル表のヘッダなどを色分けできていないデザイン無しマトリクスを見ると、気持ちが落ち着かない、ユゲタです。
僕自身は潔癖症というわけではないですが、必要最低限のデザインができていないデータは、正直ビジネスでは使えないので、仕事でこうしたデータを作っている人を見ると、どうしても残念な気分になってしまいます。
（仕事ではない資料であれば何の問題もないんですけどね）
そして、仕事でWEBサービスを構築していると、どうしてもTABLEタグとのバトルになってしまうことがあります。
Tableタグは、その昔（HTMLが3や4ぐらいのバージョン）は、ページ全体構成に使用されていたり、角丸の表現で使われていたり、非常にページ内で沢山使用されていました。
僕も個人的にとあるシステムで、任意ドット絵を表示する際に、tableタグを使って、独自画像の表現をしたことがありますが、どんなに古いブラウザでも動作できてとても便利でした。
しかし、最近はFLEXモードなど、便利な機能もHTML(CSS)に搭載されてきて、Tableタグ自体を使わないケースや、コーディング思考なども現れてきているようです。
そして、TABLEで一番困るのは、スマホで見ると、サイズが大きめのTABLEは、操作もしづらいし、スクロールして見るのも見ずらいという欠点が多く言われ始めてきました。
しかし、表組みをしなければならないページ表現でどうしてもTABLEタグは避けられないので、デザインというよりは、TABLE表現を今後に残していくために、今どきのTABLE表現を研究していきたいと考えました。
色々なサイトでHTMLタグ研究所を立ち上げている人が多いのですが、ほとんどが、研究というよりは、タグの使い方の解説ページばかりで、実使用する問題点を研究しているサイトが見当たらなかったので、現行エンジニアに役立つ情報を提供できればと考えています。
本日はその第1回として、TABLEタグの各種問題点などを考えてみたいと思います。
TABLEタグの便利と困った事
便利な点
1. エクセルのような表示が簡単にできる
2. ページ内のセンテンスの並びを揃える時に便利
3. HTMLの初期から存在する仕様なので、かなり古いバージョンでも問題なく使用できる
- 1. エクセルのような表示が簡単にできる
- TABLEタグの機能そのものですが、エクセルはビジネスツールとしては切っても切れないツールで、それをWEBページにも求められることも少なくないでしょう。
そんな時にTABLEタグは、CSVなどのデータをそのまま表現するのに最適な機能とも言えます。
- 2. ページ内のセンテンスの並びを揃える時に便利
- リストを羅列する時に、文字の長さが違ったり、特定の部分をブロック分けする際にはtableは簡単に設置することができます。
- 3. HTMLの初期から存在する仕様なので、かなり古いバージョンでも問題なく使用できる
- HTMLの基本機能として初期から存在するtableタグは、かなり古いブラウザであってもそのまま表示できます。
tableタグ自体の仕様が下位互換に対応していると考えていいでしょう。
困った点
1. cssをセットしないデザインは見づらくなってしまう
2. レスポンシブデザインを行う時に、画面サイズが小さくなると、縮小変形の方法が無い
3. 一般的な見出し付きのTABLE表を組んだ際、スクロールするとヘッダ固定にできない
4. ELEMENT操作の追加削除の手順がDIVなどの単一ELEMENTと比べてTBODY/TR/TDという階層構築がめんどくさい
5. CSSでTABLE内のセルに対してScroll処理が設置できない
6. サイズの設定が難しい（table全体とセル単体の設定が異なる際の優先順位が不明）
- 1. cssをセットしないデザインは見づらくなってしまう
- tableタグを何の装飾もなく表示すると、文字が並んで表示されるため、それぞれの間隔マージンや、罫線、最低限の背景色などは、基本設定しておかないといけません。
エクセルの表現と同じにしてもいいと思いますけどね。
- 2. レスポンシブデザインを行う時に、画面サイズが小さくなると、縮小変形の方法が無い
- tableをレスポンシブデザイン対応する際に、X軸をscroll対応するのが一般的です。
bootstrapでも、その対応しかできておらず、そのスクロールにすることにより、table箇所の表示が見づらくなるという意見も少なくありません。
- 3. 一般的な見出し付きのTABLE表を組んだ際、スクロールするとヘッダ固定にできない
- エクセルやGoogleスプレッドシートで1行目の表示を固定化する機能などがありますが、HTMLのTABLEタグにその機能が無いため、この機能を欲しがるクライアントが多いのも現状です。
色々なサイトでヘッダ固定機能のライブラリを使っているのを見かけますが、tableタグと別オブジェクトで無理やり作り込んでいるので、たまにサイズがずれてしまっているのも見かけます。
- 4. ELEMENT操作の追加削除の手順がDIVなどの単一ELEMENTと比べてTBODY/TR/TDという階層構築がめんどくさい
- 単純にappendChildする手間が単一エレメントと比較してめんどくさくてコーディングの行数が膨れ上がるというめんどくさがりプログラマのつぶやきです。
- 5. CSSでTABLE内のセルに対してScroll処理が設置できない
- tdやthに対して、"overflow:scroll"は適用できません。内部にdivタグやspanタグを設置してその内部で行うのがセオリーなのですが、その手順が無駄に感じるケースが多い。
- 6. サイズの設定が難しい（table全体とセル単体の設定が異なる際の優先順位が不明）
- TABLEタグ全体のサイズとそれぞれのセルのサイズが合っていない際に、想定していないセルが以上に大きくなったり、極端に特定のセルの幅が狭まって縦伸びしてしまうことがよくあります。
動的TABLEの構成を組む際に、この問題によく当たってしまうので、なんとかしたいですね。
関連ライブラリ
上記のような問題を都度解決したいと、以下のようなライブラリを作ってGithubにアップしているのですが、まだまだ物足りないのが事実です。
table_sort
https://github.com/yugeta/table_sort
table_numcal
https://github.com/yugeta/table_numcal
このブログの過去記事でも解説しているので、気になる方は、探してみてくださいませ。
次回予告
今回は、僕の感じたTABLEタグの問題点を列挙しただけなんですが、それ以外にもたくさんのTABELタグに対しての要望などを持っている方がいるかもしれません。
引き続きTABLEタグを便利に使っていく方法を模索していこうと思っていますが、ご意見ある方は、メールやコメントを貰えると幸いです。
今現在、TABLEタグ研究倶楽部を立ち上げようとサイトを構築していますので、出来上がった際はブログにて別途ご案内いたします。
そして、次回は（不定期ですが・・・）TABELタグの問題点に対して実際どうするのがいいかを追求してみたいと思います。
引き続き、教えて系サイトでもTABLEタグの愚痴をたまにみかけるので、その辺をサーフして情報収集してみたいと思います。
0 件のコメント:
コメントを投稿