もくじ

テーブルヘッダ

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;
}

ウェブページ(Sep.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/
Aug.2005 改訂