HTMLとCSSを始める人のための（第07部）：テーブル（01）

表は、行と列から構成されるかなり複雑な構造を持っています。表の外部の基本構造は常にtable要素です。

<table>
…
</table>

この要素の内部では、実際のテーブル定義が行われます。実際、HTMLで表を作成する際は、枠線を設定することをお勧めします。そうすることで、行と列のレイアウトがよりわかりやすくなります。これには、開始<table>にborder="1"という属性値の組合せを割り当てます。 (HTMLではborder属性を使用すべきではないことに注意してください。代わりにCSSの該当するプロパティを使用します。これについては後ほど詳しく説明します)。

<table border="1">
…
</table>

次は、表の行の定義です。これはtr要素を使用して行われます。

<table border="1">
   <tr></tr>
</table>

しかしこれだけでは、望んだ出力にはなりません。次に、列を定義する必要があります。これは再度td要素を使用します。

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

ここから、最初の表の内容を定義できます。これは<td>と</td>の間に定義します。

<table border="1">
   <tr>
      <td>コンテンツ1</td>
   </tr>
</table>

これで、ブラウザでの結果を確認する価値があります。

特に華々しいものではないかもしれませんが、現時点では表はまだ1つのセルだけです。新しい列を追加することもできます。これは再度td要素を使用して行います。その際は、tr要素の内部に定義することを忘れないでください。

<table border="1">
   <tr>
      <td>コンテンツ1</td>
      <td>コンテンツ2</td>
   </tr>
</table>

この場合も、結果を確認してみましょう。

表に追加の行を入れるには、さらに別のtr要素を配置し、その内部で再度望ましいtd要素を定義すれば良いです。

これについても一例をご紹介します:

<table border="1">
   <tr>
      <td>コンテンツ1</td>
      <td>コンテンツ2</td>
   </tr>
   <tr>
      <td>コンテンツ3</td>
      <td>コンテンツ4</td>
   </tr>
</table>

ブラウザでの結果を確認すると、次のように表示されます:





このようにして、多数のテーブルを作成できます。

ヘッド、ボディ、フッターを決定する

表は論理的な部分に分割できます。これにはヘッド、一つ以上のデータ部分、そしてフッターが含まれます。次の例は、そのようなものがどのように見えるかを示しています:

<table border="1">
  <thead>
    <tr>
      <th>出発</th>
      <th>到着</th>
      <th>プラットフォーム</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>ベルリン</td>
      <td>シュトラールズンド</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ベルリン</td>
      <td>ハンブルグ</td>
      <td>1</td>
    </tr>
    <tr>
      <td>ミュンヘン</td>
      <td>ベルリン</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

そして、ブラウザでの結果:





上記の領域に分割すると、視覚的な効果は明らかではありません。当然の疑問が浮かびます: それらの領域を定義する価値はあるのでしょうか？その理由には2つの優れた理由があります:

• CSSを使用すると、これらの領域を必要に応じて異なる形式で書式設定できます。

• ブラウザは長い表を印刷する際に、各ページで表のヘッダーとフッターを繰り返すことができます。

表のヘッダーはtheadで開始されます。それに続くのはヘッダー部分に属する表の行です。ヘッダー部分を閉じ忘れないように、ヘッダー部分を</thead>で閉じます。

表にフッターを追加する場合は、フッターを本文部分の前に定義する必要があります。フッターは<tfoot>で開始されます。その後、フッター部分に属する1つまたは複数の行が続きます。フッターを</tfoot>で閉じます。

本文部分を定義するには、tbody要素の内部に記述します。このtbodyは複数現れることができます。各本文部分はそれぞれ</tbody>で閉じます。

例えば、表に複数のtbody要素を使うべき理由は何でしょうか？それには、サッカーのブンデスリーガの表が良い例として挙げられます。このような表には通常、複数の領域が存在します。

• 優勝

• UEFAチャンピオンズリーグ出場クラブ

• UEFAチャンピオンズリーグ予選通過クラブ

• UEFAヨーロッパリーグ出場クラブ

• 中位クラブ

• プレーオフ出場クラブ

• 降格クラブ

これらの領域それぞれを独自のtbody要素に入れ、それぞれを異なるCSSでスタイリングすることができます。

列の事前定義

ブラウザーによって表がどのように表示されるかは、最初に存在する行数と列数に大きく依存します。ただし、ブラウザーが表を表示するプロセスは簡単ではありません。実際、ブラウザーは表を表示する前に常に表全体を最初に読み込まなければなりません。非常に広範囲な表の場合、これは時間がかかるかもしれません。この問題は、ブラウザーに直接、表が実際に何列あるかを指定することで回避できます。

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

colgroup を使用して列の事前定義を開始します。 以前のHTMLバージョンで使用可能だった多くの属性がHTML5では許可されていないことに注意してください。 それらのうち、現在許可されているのは span 属性のみです。 この span 属性は、表に含まれる列の数を値として期待します。

colgroup 要素は、直後に <table> を置きます。 次に、各 col 要素で列自体が定義されます。

colgroup の使用方法には基本的に2つのオプションがあります。

• span属性を使用する

• span属性を使用しない

span 属性を使用しない場合、 colgroup 要素内で、各スパングループが拡張される列ごとに col 要素を定義する必要があります。 また、 col がスタンドアロン要素であることに注意してください。

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

実際、混合形式もあります。

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

これは一つの列を別途定義したいが、他の列をグループ化したい場合に便利です。