テーブルヘッダ

thタグ

表の一番上の行、一番左の列は他と違った扱いをしたい場合があります。最も簡単には th (Table Header) タグをつかいます。太字にしてセンタリングしてくれます。その他は td タグと全く同じです。

例えば次のようになります。

これを実現するためのデータの並べ方です。

罫線のためには、thタグのほうも指定する必要があります。

table {
  border:solid 1px #cccccc;
}
td {
  border:solid 1px #cccccc;
}
th {
  border:solid 1px #cccccc;
}

tdとthを同じに設定するときは次のような書き方も可能です。区切りはコンマです。

td,th {
  border:solid 1px #cccccc;
}

違うスタイルを

せっかく違うタグなので、違うスタイルにするという手もあります。

th {
  background-color:#003333;
  color:#fffff0;
  padding:4px;
}
td {
  background-color:#66cccc;
  color:#000000;
  padding:4px;
}