HTMLに表を挿入して装飾する

表の構成

ブラウザでは、以下のように表を表示することができます。

一番上にタイトルがあります。1行目にはヘッダーがあって、ヘッダーの中には3つのセルが横並びで表示されています。また、2行目と3行目にはデータのセルが3つずつ並んでいます。

カッコ内にcaptionやtr、th、tdと記載されていますが、次で説明します。

表を作成する

表を作成するためには、table要素を使います。以下は、HTMLの例です。

<table>
  <caption>表のタイトル</caption>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
    <tr>
      <td>データ1-1</td>
      <td>データ1-2</td>
      <td>データ1-3</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
      <td>データ2-3</td>
    </tr>
</table>

caption要素は、タイトルです。tr要素は、行を示します。ヘッダーのセル(th)やデータのセル(td)を入れて、1行を構成します。3つセルを入れると3列、4つセルを入れると4列の表が作成されます。

tr要素を追加していくことで、行が増えていきます。上の例では、1行ずつ色分けしています。

上記をブラウザで表示すると、以下のようになります。

デフォルトでは枠線などもなく、表らしく見えません。

theadとtbodyを使ってまとめる

以下のように、記述もできます。

<table>
  <caption>表のタイトル</caption>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1-1</td>
      <td>データ1-2</td>
      <td>データ1-3</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
      <td>データ2-3</td>
    </tr>
  </tbody>
</table>

変更点は、赤字と青字部分を追加したことです。

赤字のtheadは、ヘッダーを示します。青字のtbodyは、本体部分を示します。このように、ヘッダーや本体部分をまとめることで、ヘッダーだけや本体だけにスタイルを適用することができるようになります。

表の装飾

表らしく見せるためには、枠線などを追加していく必要があります。以下は、CSSの例です。

.test {
  margin: 14px auto;
  border: 1px gray solid;
}

.test th {
  color: white;
  padding: 6px 8px;
  border: 1px gray solid;
  background-color: blue;
}

.test td {
  padding: 6px 8px;
  border: 1px gray solid;
}

table要素に、クラスtestを適用すると、最初の例で示した表のように枠線付きで表示されます。

ポイントは、赤字のborderプロパティです。枠線を1pxの太さ、灰色(gray)、実線(solid)で指定しています。table要素だけ対象にすると、表の外周だけ枠線が付きます。このため、thやtd要素も対象にすることで、セル間にも枠線が表示されるようにしています。

また、青字のmargin: 14px auto;があるため、表は中央にセンタリングして表示されます。

二重線の間隔を狭くする

先ほどの例では、セル間の枠線が二重線で表示されます。この間隔は、以下のように狭くすることができます。

狭くするのには、border-spacingプロパティを使います。

.test {
  border-spacing: 1px;
}

border-spacingは継承するため、thやtd要素でも適用されます。

また、5pxなど指定して間隔を広げることもできます。

セルの間隔をなくす

以下のように、セル間の間隔をなくして一本の線で表示することもできます。

一本の線にするためには、border-collapseプロパティを使います。

.test {
  border-collapse: collapse;
}

border-collapseも継承します。

border-collapseのデフォルトはseparateで、二重線(間隔を空ける)です。

偶数行、奇数行で背景色を変える

行や列が多くなってくると、右端のデータが左端のデータのどれに該当するのか見分けにくくなることがあります。その対応として、以下のように行ごとに背景色を変えることがあります。

行ごとに背景色を変えるためには、構造疑似クラスのnth-childを使います。

.test tbody tr:nth-child(2n) {
  background-color: lightgray;
}

.test tbody tr:nth-child(2n+1) {
  background-color: snow;
}

nth-child(2n)が偶数行、nth-child(2n+1)が奇数行に該当します。セレクタの中にtbodyを含めているのは、データ部分だけ背景色を変えるためです。これがないと、ヘッダー部分の背景色も変わる可能性があります。

最初の列だけ背景色を変える

最初の列だけ背景色を変えることもできます。

最初の列だけ背景色を変えるためには、構造疑似クラスのfirst-childを使います。

.test tbody td:first-child {
  background-color: bisque;
}

first-childが、列の最初のtd要素を示します。

横幅を均等にする

以下の表は、一部のデータが長いため、真ん中の列だけ横幅が多く取られています。

このため、左右の列ではヘッダーの文字が折り返されています(2段になっている)。

可能な限り折り返さないよう、横幅を均等にするためには、table-layoutプロパティを使います。

.test {
  table-layout: fixed;
  width: 100%;
}

width:100%;の場合、親要素の横幅一杯に表示されます。このため、親要素の横幅が広い場合は、width:60%;などで横幅を調整できます。

上記を適用すると、以下のように表示されます。

table-layoutのデフォルトは、autoです。autoでは、表をすべて読み込んでから横幅を決めます。fixedにすると、表の1行目だけで横幅を決定できるため、表示が速くなる利点もあります。

横幅を指定する

横幅を直接指定することもできます。

.test thead th:nth-child(1) {
  width: 35%;
}

.test thead th:nth-child(2) {
  width: 47%;
}

.test thead th:nth-child(3) {
  width: 18%;
}

nth-child(1)は、左から1番目のセルを示します。nth-child(2)が2番目、nth-child(3)は3番目を示します。

上記を追加することで、列の横幅が指定どおりにとられ、以下のように表示されます。

なお、上記を追加する際は、先に説明したtable要素を対象にしたtable-layout:fixed;とwidthも指定します。指定しないと、列の幅が大きくとられることがあります。

また、widthはpxなどでも指定できますが、スマートフォンなど画面が小さい時でも対応できるようにするためには、%での指定がお薦めです。

セルの結合

2つ以上のセルを、1つのセルに結合して表示したい時があります。次からは、横のセルを結合する方法と、縦のセルを結合する方法を説明します。

横のセルを結合する

以下は、本体部分の1行目で2つのセルが結合されています。データ1-1の部分です。

このように、横のセルを結合するためには、属性のcolspanを使います。以下は、例です。

<table>
  <caption>表のタイトル</caption>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
    <tr>
      <td colspan="2">データ1-1</td>
      <td>データ1-3</td>
    </tr>
    <tr>
      <td>データ2-1</td>
      <td>データ2-2</td>
      <td>データ2-3</td>
    </tr>
</table>

赤字のcolspanの後に、結合するセルの数を指定します。3であれば、3つのセルが結合されます。1行すべて結合して、同じセルにすることも可能です。

ポイントは、結合された側にはtd要素でセルを作らないようにすることです。上の例で、青字のtr要素には2つのtd要素(データ1-1とデータ1-3)しかありません。他のtr要素と同じように3つのtd要素を作ると、表からはみ出してしまいます。

縦のセルを結合する

以下は、本体部分の1列目で2つのセルが結合されています。データ2-1の部分です。

このように、縦のセルを結合するためには、属性のrowspanを使います。以下は、例です。

<table>
  <caption>表のタイトル</caption>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
    <tr>
      <td>データ1-1</td>
      <td>データ1-1</td>
    </tr>
    <tr>
      <td rowspan="2">データ2-1</td>
      <td>データ2-2</td>
    </tr>
    <tr>
      <td>データ3-2</td>
    </tr>
</table>

赤字のrowspanの後に、結合するセルの数を指定します。colspan同様に、3つ以上のセルを結合することもできます。

セル内でセンタリングする

セル内で文字をセンタリング(中央寄せ)するためには、text-alignプロパティを使います。

.test td {
  text-align: center;
}

text-align:center;がセンタリングです。leftを指定すると左寄せ、rightを指定すると右寄せになります。

すでに説明した構造疑似クラスのfirst-childを使って、先頭列だけセンタリングもできます。

.test tbody td:first-child {
  text-align: center;
}

上記は、以下のように表示されます。

本体部分の一番左だけセンタリングされています。

キャプションの位置を調整する

表のタイトルの位置は、調整できます。以下は、表示例です。

タイトルが表の下に表示されています。これは、caption-sideプロパティを使って行えます。

.test {
  caption-side: bottom;
}

caption-sideのデフォルトはtopで、上に表示されます。

フッター

表は、以下のようにも記述できます。

<table>
  <caption>表のタイトル</caption>
  <thead>
    <tr>
      <th>商品</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>タープ</td>
      <td>7,000円</td>
    </tr>
    <tr>
      <td>ランタン</td>
      <td>2,000円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>9,000円</td>
    </tr>
  </tfoot>
</table>

赤字部分のtfoot要素を追加することで、フッターが作成できます。

tfootを追加せずに、tbodyの中に入れてもいいのですが、以下のようにtfootを対象にスタイルを変えることができるようになります。

最後の行(tfoot要素)で、文字が太字になって背景色も変わっています。