ホームページ

  • Twitter
  • Facebook
  • HATENA
  • POCKET

tableタグについて考える

目次

  1. tableタグとは
  2. CSS設定のコツ
  3. 横幅の設定
  4. スマホでの見せ方
  5. セルを縦並びにする
  6. 横スクロールさせる
  7. まとめ
好きな動物はミニカバです。とらりんです。トラではありません。
さてさて、今回は歴史の古いtableタグについて考えてみたいと思います。

tableタグとは

html黎明期にはtableレイアウトとして活躍したtableタグ。
本来の使い方は「表」です。今さら言われなくてもですね。

HTML の <table> 要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

なんとなくtableタグ使うのダサい、古い、というイメージですが、表を作成する場合には堂々と使いましょう。

CSS設定のコツ

扱いは難しくないはずなのですが、たまにはまってしまう注意点をご紹介。

横幅の設定

内容量によって幅が可変するので全体の幅は具体的な数字の方が良いでしょう。
え?なんで?どーゆ―こと???とプチパニックなるのがth、tdに横幅を設定してもきかない場合。
そういう時はtableタグにtable-layout:fixed;を設定してみると。。あ~ら不思議。
ちゃんと横幅の設定が効くようになります。

スマホでの見せ方

スマートフォンの場合、横幅が狭くなるので見にくい場合があります。
そういう時の対処法を2つご紹介。

セルを縦並びにする

各セルをブロック要素にすることで縦並びにすることができます。

横スクロールさせる

溢れた分を横スクロールできるようにします。
横スクロールできることに気づいてもらえるようにする事も重要です。