表の一番上の行、一番左の列は他と違った扱いをしたい場合があります。最も簡単には 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; }