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

応用46. tableに関するプロパティ

      2017/12/19

borderプロパティの指定

table要素td要素(th要素)にborderプロパティを指定すると、隣接するborderに隙間ができます。これはtable要素の初期値に、border-collapse: separate;が設定されているからです。
table要素にborder-collapse: collapse;を設定することで隣接するborderを重ねることができます。
border-collapse: collapse;は、リセットCSSであらかじめ指定しておくのが一般的です。

border-collapse: separate;

border-collapse: collapse;

border-collapse: separate;の状態では、tr要素borderプロパティの指定ができません。
table要素にborder-collapse: collapse;を指定した場合、tr要素borderプロパティの指定ができます。

table要素の初期値 - display: table;

>display: table;は、親要素から幅を継承しません。table要素に幅の指定がない場合は、th要素td要素の内容で幅が決まります。paddingの指定は無効になります。上記以外は、display: block;と同じです。

tr要素の初期値 - display: table-row;

display: table-row;は、行内のセルをグループにします。width, height, margin, paddingの指定は無効になります。

th要素、td要素の初期値-display: table-cell;

display: table-cell;は、widthheightの指定をしない場合は、内容で幅と高さが決定します。
table要素に幅が指定してある場合は、各セルの幅が自動調整されます。
高さは、行内のセルで一番大きいサイズに自動調整されます。
幅は、同列のセルで一番大きサイズで自動調整されます。
marginの指定は無効になります。

下記のコードは、th要素に幅を指定することで、td要素の幅が自動調整されます。

セル幅の自動調整

セル内の位置調整

左右の位置調整は、text-alignプロパティで指定します。

  • text-align: left;・・・左
  • text-align: center;・・・左右中央
  • text-align: right;・・・右

上下の位置調整は、vertical-alignプロパティで指定します。

  • vertical-align: top;・・・左
  • vertical-align: middle;・・・上下中央
  • vertical-align: bottom;・・・下

セル内の位置調整

vertical-alignプロパティとは

th要素td要素に指定した場合は、内容の上下の位置調整ができました。
それ以外の要素で指定した場合は、ベースライン(テキストの行の縦方向のそろえ位置)の指定になります。
要素内の上下の位置調整には使用できませんので、注意しましょう。
下記のコードでは、pタグ内のテキストが左右中央にはなっていますが、上下中央になっていません。

table以外のvertical-align

まとめ

  • table要素にborder-collapse: collapse;を指定すると隣接するborderが重なる。
  • セルの高さは、行内のセルで一番大きいサイズに自動調整される。
  • セルの幅は、同列のセルで一番大きサイズで自動調整される。
  • 各行のセルは、同じ数で構成する必要がある。
  • セル内の内容の左右の位置調整は、text-alignプロパティで行う。
  • セル内の内容の上下の位置調整は、vertical-alignプロパティで行う。

 - HTML・CSS