tableタグに関するあれこれ備忘録【応用編】

スポンサーリンク

※本サイトにはプロモーションが含まれています

tableタグを使う機会が多々あるので、以前tableタグに関する基本あれこれ備忘録という記事を書きました。
今回は更に応用編として、(自分的に)新しい小ワザをまとめました。

※2018年2月8日に追記しました。

thead、tbody、tfootを使おう!

これまでtbodyすら使わずtableの中に直接trを書いていましたが、

  • thead…テーブル内でいちばん上の、見出し部分
  • tbody…内容の部分
  • tfoot…テーブル内最後のまとめ部分

というふうに書き換えると、テーブル内の構造がはっきりします。

ゆくゆくはtheadを固定してスクロールできるようになる??と聞いたことがあり、
(そうなったら、テキスト量が多いテーブルの時はめっちゃ便利!!)

文書構造を重要視しているHTML5の考え方にも合致しているので、
thead、tbody、tfootはすぐにでも取り入れたいタグです。


data-titleとかいう便利なやつ

tableの項目が多い時、スマホでそのまま縮小して表示すると、セルの幅が狭くなって読みにくくなります。
tdにdata-titleを指定すると、それをcssで呼び出すことができるため、theadを非表示にしてもタイトルを表示することができます。

HTML

タイトルその1タイトルその2タイトルその3タイトルその4
データその1データその2データその3データその4データその5

CSS

プレビュー

タイトルその1 タイトルその2 タイトルその3 タイトルその4
データその1 データその2 データその3 データその4 データその5

attrdata-titleを呼び出せます。
""の中に=や:などを入れてあげると、タイトルとデータの区切りができてさらに見やすくなります。
attr(data-title)"…"の間は半角スペースを入れて区切ります。

こちらの記事が大変わかりやすく参考になりました!
スマホでtableタグを見やすくするCSS:Qiita


スマホのメニューに便利なtable

スマホの画面下に固定されているようなボタンメニューを作るとき、
display: table;が簡単で重宝します。
tableの表示からは少し脱線しますが掲載しておきます。

HTML

CSS

プレビュー

今回はメニューを3つにしていますが、数が増減した場合でもセルの幅の計算がいらず、手軽です。


英字を入れる時は、折り返しの設定が必要

スマホで閲覧した時は特に、URLなど繋がった英字を入れると、
thやtdの幅が無視されてしまったり、文字がはみ出してしまうことがあります。b
指定した幅で表示させるには設定が必要です。

折り返し処理をする似たようなCSSで、word-wrapというのがあります。
word-wrapは、単語の切れ目の余白で折り返されるものです。

意味のある英文ではword-wrap: breal-word;が好ましいですが
URLの場合は、単語の切れ目がないため、word-wrapを指定しても結局はみ出してしまう場合が多いです。
URLの場合はword-breakを指定する方が好ましいでしょう。

折り返しについては、こちらの記事に詳細がまとめられていました。(勉強になります…!!)
word-breakとword-wrapはややこしい:W3G


まとめ

レスポンシブデザインの場合のtableの表示には、データ量などにより読みやすい工夫が必要な場合が多々あります。
そんな場合に使える小ワザをまとめました。お役にたてれば幸いです(^^)

コメント

タイトルとURLをコピーしました