皆さんこんにちは。くるるです。今回はサイト作成シリーズ第３回、テーブルタグの正しい使い方についてです。テーブルタグは本来、表を書く時に使われるタグですが、多重構造可能なため、レイアウト目的で使っている人が多いです。そこで今回は、テーブルタグをレイアウト目的で使うことによるデメリット、テーブル表示を早くする小技を中心に話していきたいと思います。
テーブルタグは<table>〜</table>で囲まれたタグを総称して呼ばれます。このテーブルタグはネット上では表よりもレイアウト目的で使われることの多いタグです。ところがレイアウト目的でこのタグを使うと色々と問題も起きます。
まずは思想的な問題で、w3cの提唱するHTML4.01規格に準拠できなくなります。この規格ではレイアウトやデザイン的な部分はスタイルシートに任せ、HTMLでは内容の意味を的確にマークアップする事、となっています。つまり表ではないものにテーブルタグを使うのは間違い、ということです。これはブラウザがレイアウト目的のテーブルタグなのか、表のテーブルタグなのかを判別できないため、例えば読み上げブラウザを使っている人が、表も何も無いサイトで「表です」を連呼される結果となり、非常に見苦しいです。
もう一つは純粋に「表示が遅くなる」という事です。これはほぼ全てのユーザーに与える悪影響で、しかも「少し」というレベルではありません。構造によっては100倍以上の時間がかかることもあります。またHTMLが複雑になりタグの数も増えるため、管理人にも把握しづらい、メンテナンスが面倒、ファイルサイズが増えてサーバーの容量を喰う、など管理人に与える悪影響も決して小さくはありません。ちなみに表示のやたら遅い、サイトやブログなんかは、大抵これが原因です。簡単に直せるのにやらないでユーザーにストレスを与える、典型的な職務怠慢です（苦笑）単に無知とも言いますけどね。
スタイルシートを使えばテーブルタグを使うよりも簡単に、自由に、レイアウトする事ができます。スタイルシートは難しいと感じるかもしれませんが、テーブルタグの入れ子構造を考えるよりははるかに簡単なので、これを機にスタイルシートを導入してみてください。どうすればいいのか分からない人はメールくれれば教えますので♪
では今度はテーブルを表として使う場合です。小さな表なら特に問題は無いんですが、大きな表（例えばディスガイアのキャラ一覧のように、項目数が20を超え、データ数が200を超えるような表）場合は、表示されるまでどうしても時間が掛かってしまいます。しかし、スタイルシートと組み合わせたり、構造を少し変えてあげる事で、ユーザーに与える体感速度を上げる事ができます。
表が遅い原因は、データが揃うまで表のサイズを決められない事と、表データを全部読み込みレイアウトが決定するまで表示されない、という２つの特徴によるものです。そこで、スタイルシートによって予め各項目のサイズを指定しておき、なおかつ読み込みながら徐々に表示するように指定する事で、リンクをクリックしてから表が表示され始めるまでの時間を大幅に短縮できます。
では両者がどのぐらい違うか、実際のページで確認してみてください。サンプルはディスガイアのキャラデータです。サイズが大きすぎるため携帯からの閲覧は保障できませんので予めご了承ください。
・スピードアップ処理後
・テーブルタグのみ
このぐらいの表ではあまり差は出ませんが、パソコンの性能によっては雲泥の差になります。これでもまだ遅い＆見づらいと感じたので、実際に攻略ページに載せてある表は、複数に分けて、処理を分散しています。
→関連ページ：ディスガイア攻略ページのキャラデータ表
このように表を分割できる時は、分割した方が体感速度は上がります。
徐々に表示するには、table要素に、table-layout:fixed スタイルを指定します。このままでは、最初の一行の文字数に合わせて横幅が決まってしまうので、colタグを使って列をグループ化し、それぞれにクラス指定して、クラス毎に width スタイルを指定します。詳しい事は各ページのソースを参照してください。スタイルシートの指定は、以下のソースを参照してください。
→参照：スタイルシートのソース
詳しい説明が欲しい方は、メールにてお答えします♪メールフォームでは返信が大変なので、必ずメールにしてください。
感想はコチラ
ご意見、ご要望は、メール：kururu@plala.toや、雑談掲示板などでも受け付けてます♪