1. 並び替え(ソート)機能を付加
数値データが含まれる情報なら、大きい順や小さい順に並び替えたい(ソートしたい)と思うユーザも多いはず。まるで表計算ソフトのソート機能のように、HTMLで作った表にも「並び替え(ソート)」機能を付加する方法があります。
ウェブ上に表形式でデータを掲載する場合、Excelなどの表計算ソフトと同様に「並び替え(ソート)」機能を加えたいと思ったことはありませんか？「Tablesorter」スクリプトを使うと、table要素を使って記述したHTMLの表に「ソート機能」を簡単に加えられます。
2. 読みたい項目(列)だけを抜粋する機能を付加
項目数の多い表を見ていると、自分が今どこを見ているのか把握しにくくなります。不要な列を非表示にできると、見やすく分かりやすい表になるでしょう。HTMLで作った表に、「列の非表示(抜粋)」機能を付加する方法があります。
ウェブ上に掲載している表組み(テーブル)でも、閲覧者が列の「表示・非表示」を切り替えられるようにしてみましょう。不要な列を非表示にできると、列数の多い表でも列幅が狭くなりすぎるのを防げ、見やすさを維持できます。
3. ウインドウ(表示領域)の幅に合わせて表を展開
横幅の狭いウインドウで大きな表を閲覧すると、列の幅が狭くなりすぎて見にくくなります。それを防ぐために、列を自動展開することで見やすさを確保する機能を用意しておくと便利です。
横長のtableを、狭い画面でも見やすく自動展開してくれる「stacktable.js」の使い方を解説。ページを様々な画面サイズに対応させたい際に困るのが「横長の表」の扱いです。狭い画面だと、列幅が極端に狭くなって読みにくくなります。そこで便利なのが「stacktable.js」スクリプト。指定サイズより狭い画面では、表を行単位で展開(分解)してくれます。
4. 表に自動で連番を振る
表には連番を振りたいことも多々あるでしょう。実はスクリプトを使うまでもなく、CSSを使うだけで、表の各行・各列・各セルなどに連番を振ることができます。
HTMLで作成した表(テーブル)に1行ずつ連番を振りたいと思ったことはありませんか？CSS(スタイルシート)のcounter-incrementプロパティ等を使えば、表の特定のセルに自動で連番を振ることも簡単です。1・2・3のような数値だけでなく、第1位・第2位・第3位のように任意の文字を組み合わせた連番も簡単に表示できます。
5. 表の縦方向(列)単位で一括装飾する
表を装飾する際、行(横方向)単位で装飾するのはとても簡単ですが、列(縦方向)単位で装飾するのは、少々面倒でしょう。CSS3などを使って楽に一括装飾する方法を知っておくと便利です。
CSSだけを使って、表(テーブル)の「列(縦方向)」を一括装飾する方法をご紹介。CSS3で追加された「nth-of-type」や「nth-child」疑似クラスを使えば、表の列をグループ化するcolgroup要素などは一切使わずに、CSSの記述だけで列を一括装飾できます。HTMLを修正することなく、表を列単位で自由自在に装飾してみましょう。
6. 表の各列のサイズ(幅)を均等にする
表を掲載する際、行や列の大きさは中身の分量によって自動で決定されます。不揃いになってしまう点が気に入らないなら、均等に配分されるよう指定しておきましょう。
通常、table要素を使って表を作ると、セルの内容量に応じて自動的に横幅が決定されます。その結果、幅がバラバラになることがあります。横幅のピクセル数を指定することなく、セル幅を均等にする方法をご紹介。
