tableタグについて考える

好きな動物はミニカバです。とらりんです。トラではありません。

さてさて、今回は歴史の古いtableタグについて考えてみたいと思います。

html黎明期にはtableレイアウトとして活躍したtableタグ。

本来の使い方は「表」です。今さら言われなくてもですね。

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

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

内容量によって幅が可変するので全体の幅は具体的な数字の方が良いでしょう。

え？なんで？どーゆ―こと？？？とプチパニックなるのがth、tdに横幅を設定してもきかない場合。

そういう時はtableタグにtable-layout:fixed;を設定してみると。。あ～ら不思議。

ちゃんと横幅の設定が効くようになります。

スマートフォンの場合、横幅が狭くなるので見にくい場合があります。

そういう時の対処法を2つご紹介。

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

溢れた分を横スクロールできるようにします。

横スクロールできることに気づいてもらえるようにする事も重要です。

いかがでしたか。

たかがtable、されどtable。うまく使いこなしていきたいものです。