Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
HTMLの基本
フレーム
レイアウト
画像
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ
 
IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ <thead> <tbody> <tfoot>
テーブルは <thead> <tbody> <tfoot> に分ける事が出来ます。

<table border="1" cellpadding="2" cellspacing="0">
<thead bgcolor="#d0d0d0">
<tr>
<th>学期\教科</th><th>国語</th><th>数学</th><th>理科</th>
</tr>
</thead>
<tfoot bgcolor="#f0f0f0">
<tr>
<th>合計</th><td>210</td><td>220</td><td>230</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>1学期</th><td>60</td><td>70</td><td>90</td>
</tr>
<tr>
<th>2学期</th><td>80</td><td>70</td><td>70</td>
</tr>
<tr>
<th>3学期</th><td>70</td><td>80</td><td>70</td>
</tr>
</tbody>
</table>

学期\教科 国語 数学 理科
合計 210 220 230
1学期 60 70 90
2学期 80 70 70
3学期 70 80 70


ソースを<thead> <tbody> <tfoot>別に色分けしてみました。 ブラウザによっては正しく表示されないかも知れませんが、上から <thead> <tfoot> <tbody> の順で書き、 表示は <thead> <tbody> <tfoot> の順になります。

今回は <thead> <tbody> <tfoot> に bgcolor でセルの色を付けましたが、<tr> 単位、つまり行単位でも出来ます。行のグループ化は <tr> で良いような気がします。 <thead> <tbody> <tfoot> はグループ化と言うより、表計算用みたいな感じですね。

HTMLでは <tbody> の省略が出来ます。しかし <thead> や <tfoot> を使った場合は、 <tbody> の省略は出来ません。

注1: 太文字でセンター表示になっているのは、<td> の代わりに <th> を使っているからです。 注2: <th> でもブラウザによっては太文字でセンター表示にならない可能性もあります。
■ <col> <colgroup>
<col> <colgroup> は縦列のセルをグループ化するものです。

<table border="1" cellpadding="2" cellspacing="0">
<caption>果物の色別表</caption>
<colgroup>
<col span="1" bgcolor="#ffff66" align="center" width="80">
<col span="1" bgcolor="#99cc99" align="center" width="80">
<col span="2" bgcolor="#ff6699" align="center" width="80">
</colgroup>
<tr>
<th>黄色系</th>
<th>緑系</th>
<th colspan="2">赤系</th>
</tr>
<tr>
<td>レモン</td>
<td>スイカ</td>
<td>さくらんぼう</td>
<td>モモ </tr>
<tr>
<td>バナナ</td>
<td>ライム</td>
<td>リンゴ</td>
<td>イチゴ</td>
</tr>
</table>

果物の色別表
黄色系 緑系 赤系
レモン スイカ チェリー モモ
バナナ ライム リンゴ イチゴ

<col> <colgroup> の部分を青文字にしてみました。bgcolor / align / width を <col> で指定し、各セルでは指定していません。セルの少ないテーブルでは各セルで指定しても良いですが、 セルが多くなると、グループ化して指定すると楽です。また赤系は2列あるので、span="2" にしています。

注3:「果物の色別表」は <caption>果物の色別表</caption> で、表題になります。
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.