配置

セル内の配置

tdやthで作られる項目の範囲をセルといいます。

セルの大きさを指定して広くとると文字（または画像）の位置を指定したくなるかもしれません。

まずは指定しない時の様子（デフォルトといいます）を見てみます。thとtdで違います。

もっとも、これは html の規格ではなく、ブラウザの設計者が決めることですので、ブラウザごとに異なっている可能性があります。

text-align (左右)

値は left center right の３種類です。td または th または tr に指定します。

単純にtdに指定するとすべてのセルがその配置になります。セルによって指定を変えたい時はclassを使って指定します。

セルごとに class 分けして指定する

td.wst{text-align:left;}
td.cen{text-align:center;}
td.est{text-align:right;}

tr に指定すると行ごとに変えられる

tr.wst{text-align:left;}
tr.cen{text-align:center;}
tr.est{text-align:right;}

列ごとに指定する方法は、これまでブラウザによって異なっていて、tdにclass指定するしかありませんでした。しかし、css3 により、nth-child という指定方法が使えるようになりました。下にまとめて説明します。

vertical-align (上下)

値は top middle bottom の３種類です。td または th または tr に指定します。

セルごとに class 分けして指定する

td.top{vertical-align:top;}
td.mid{vertical-align:middle;}
td.btm{vertical-align:bottom;}

tr に指定すると行ごとに変えられる

tr.top{vertical-align:top;}
tr.mid{vertical-align:middle;}
tr.btm{vertical-align:bottom;}

列ごとに指定する方法は、これまでブラウザによって異なっていて、tdにclass指定するしかありませんでした。しかし、css3 により、nth-child という指定方法が使えるようになりました。下にまとめて説明します。

nth-child で列ごとに指定する

次の表はtr,tdにclass指定が一切ありません。

2列目には右寄せ、3列目には中央で下の指定をしてあります

td:nth-child(2){text-align:right;}
td:nth-child(3){
  text-align:center;
  vertical-align:bottom;
}

:で区切ります

クラスの区切りは「.」です。nth-childは擬似クラスといい、「:」で区切ります。

nth-child()

n番目の子要素という意味です。( )の中はいろいろな書き方がありますが、とりあえず数値を書くのをやってみます。

td:nth-child(2) は2番めの子供の要素ということです。

子要素

上の例では3つの<td>要素が<tr>要素の中に入っています。このようなとき、<tr>を親要素、<td>を子要素といいます。その2番目の子が td:nth-child(2) です。

新しい<tr>が出てくると番号はまた1から振り直されて、2番めの子が td:nth-child(2) です。結果として2列目が指定の対象となります。