テーブルヘッダ

thタグ

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

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

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

<table>
<tr><th>動物</th><th>鳴き声　</th><th>好物　</th></tr>
<tr><th>いぬ</th><td>わんわん</td><td>ほね　</td></tr>
<tr><th>ねこ</th><td>にゃー　</td><td>こたつ</td></tr>
<tr><th>うま</th><td>ひひーん</td><td>にんじん</td></tr>
</table>

罫線のためには、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;
}