HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用47. tableの応用

      2018/02/07   hatano

tableを使った見せ方

tableはCSSの設定次第で見やすくも見づらくもなります。この章では見やすい表組みのサンプルを紹介します。

装飾前のtable

th要素とtd要素のみにborderをつけた表組みです。セルの余白がなく、borderの付け方も工夫が必要です。
table要素に、border-collapse: collapse; を指定していますが、reset.cssで指定してある場合は不要です。

borderのみのtable

widthとpaddingで見やすくする

table要素にwidthを設定し、各セルの余白はpaddingで調整します。
th要素には、初期値として text-align: center; font-weight: bold; が設定されているので、行揃えのみ左よせにしています。
また、th要素のみwidthを設定し、td要素の幅は自動調整にしています。

paddingで余白をつくったtable

背景色とborderを調整する

th要素とtd要素のborderをなしにし、代わりにtable要素とtr要素にborderを指定しました。
th要素には背景色を指定して区切りが分かるようにしています。
tr要素にborderを指定する場合、table要素に border-spacing: 0; を指定するとborderが表示されないので注意してください。

borderとbackground-colorで調整したtable

thを見出し行にした表組み

th要素を見出し行として設定した表組みです。
最後のth要素のみclassを付け、borderをなしにしています。

見出し行のtableデザイン

他の要素で表組みを再現する

他の要素でも display: table; display: table-row; display: table-cell; を指定するとtableの見た目と機能を再現することができます。
下記のような場合に有効です。

  • vertical-align: middle; でテキストやインラインの要素を上下中央揃えにしたい
  • 幅、高さを自動調整したい

divと定義型リストでつくったtable

1行のみの場合は display: table-row; を省略して、display: table; display: table-cell; のみで利用できます。

table-rowを省略したtable

まとめ

  • tableは、border, padding, background-colorを使いこなすことで、見た目を良くすることができる
  • display: table; display: table-row; display: table-cell; を使えば他の要素でも表組みを再現できる

広告

 - HTML・CSS