HTML＆CSS初心者向け（第08部）：表（02）

ますます、セルを行内にスパンさせる方法をお見せします。これにより、特定の行内の列が複数の列にまたがるようになります。

例：

<table border="1">
   <tr>
      <th colspan="2">スケジュール</th>
   </tr>
   <tr>
      <td>4月11日, 2014年</td>
      <td>4月12日, 2012年</td>
   </tr>
   <tr>
      <td>4月13日, 2014年</td>
      <td>4月14日, 2014年</td>
   </tr>
   <tr>
      <td>4月15日, 2014年</td>
      <td>4月16日, 2014年</td>
   </tr>
</table>

ここで使用されているth要素に関して。この要素はヘッダーセルを示します。ブラウザはこれらのセルを通常太字で中央に表示します。ブラウザ上の結果は次のとおりです：

th要素内にあるcolspan属性が設定されています。値として、現在のセルが伸びる列数が期待されます。指定された列数があっていることを確認してください。そうしないと、うまくいかない可能性があります。この例では、thで示されるヘッダー行が二つの列にまたがるようにするため、残りの二つの行には再びそれぞれ二つの列が含まれます。

行の結合に関連した他のポイントもあります。開発段階ではテーブルに枠線（border）を付けてください。そうすれば、接続が望むように機能しているかどうかが直接わかります。

列の中のセルを行にまたがって結合する

rowspan属性を使用して、一つの列内の複数のセルを結合できます。該当のセルはその後、列内に複数の行にまたがります。ここにも例を示します：

<table border="1">
   <tr>
      <th rowspan="2">色</th>
      <td>青</td>
   </tr>
   <tr>
      <td>緑</td>
   </tr>
   <tr>
      <th rowspan="2">サイズ</th>
      <td>1.70</td>
   </tr>
   <tr>
      <td>1.80</td>
   </tr>
</table>

ブラウザで表示すると次のようになります：





rowspan属性には数値が割り当てられます。これは最終的に、セルが行内にまたがるべき行数を決定します。ここでももちろん、指定された行数が実際に一致している必要があります。

セルの行および列を同時に結合する

rowspanおよびcolspanという2つの属性は、実際には組み合わせることができます。これにより、複数の行と列にまたがるセルを定義できます。これもまた、例を使って説明するのが一番です。

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">アパート</th>
      <td>5部屋</td>
   </tr>
   <tr>
      <td>154平方メートル</td>
   </tr>
   <tr>
      <td>シャルロッテンブルク</td>
      <td>パーキングスペース</td>
      <td>床暖房</td>
   </tr>
</table>

ブラウザで見ると、次のようになります：





これら2つの属性を組み合わせる際には、最終的にセルの数が実際に一致していることを確認してください。

テーブルにキャプションを付ける

テーブルをより理解しやすくする非常に興味深い方法は、caption要素を使用することです。これにより、テーブルにタイトルや説明を追加できます。 captionの内容は、テーブル外に表示されますが、テーブル内で定義されます。

captionについての典型的な使用法を以下に示します：





表の上に表題が表示されます。デフォルトでは、表の上にタイトルが中央に表示されます。もちろん、CSSを使って個別に変更することもできます。

caption要素は、<table>タグの直後に配置されます。

先ほど表示した例の完全な構文は次の通りです：

<table border="1">
   <caption>メディアデータ</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>テーマ</th>
         <th>ビュー数</th>
         <th>トレンド</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">2014年6月現在</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12,245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12,123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11,546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

テーブルのデザイン

かつてのHTMLバージョンでは、テーブルのデザインに多くの属性が存在しました。これらは、属性を使って調整できた例をいくつか紹介します（もちろん、現在のブラウザでもこれらの属性はサポートされています。ただし、HTML5ではこれらを使用するべきでありません）。

• 外枠

• 内部テーブル枠

• 幅や高さの指定

• グリッド線

• セルの内容の配置

• 色

• 背景画像

HTML属性を使って本当にすべてのことを制御できることが分かります。次の例は、これらのオプションをたっぷりと活用したテーブルが示されています：

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Eins</td>
      <td width="200" bgcolor="#00ffff">Zwei</td>
      <td width="200">Drei</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Vier<</td>
      <td bgcolor="#996666">Fünf</td>
      <td bgcolor="#003333">Sechs</td>
   </tr>
 </table>

結果を見れば、望ましい結果を得ることができます。

見た目が正しく表示されていても、その背後にある構文は効率的ではありません。テーブルの属性をCSSで制御する方が良いです。新しいCSS属性のおかげで、古い属性を近代的な構文に置き換えるだけでなく、さらに追加の機能も可能になりました。たとえば、現在はテーブルの行を簡単に交互に色付けできます。

かつてのHTMLやCSSの時代には、このような結果を得るためには複雑なコードを書かなければなりませんでした。現在はCSSの可能性を積極的に活用することで、このようなことが簡単に実現できます。

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

これまで何度か述べてきたように、このシリーズ全体でCSSについて詳しく説明します。