ホームページ作成講座[CSS編]テーブルのスタイル設定

作成日:2019.09.17
  1. HOME
  2. ホームページ作成講座
  3. テーブルのスタイル設定

このページでは表(テーブル)に関連したスタイルの指定方法について説明します。

  1. 枠線の間隔の指定
  2. 枠線をまとめる
  3. 縦揃え
  4. 空白セルの表示方法
  5. タイトルの位置指定

枠線の間隔の指定

スタイルシートでセルとセルの間隔を指定することができます。プロパティと値は以下の通りです。

border-spacing : 数値
枠線の間隔(セルとセルの間隔)を指定します。

(サンプル)

<style>
table{
  border : 2px solid skyblue;  //2pxのスカイブルーの枠線(以下のサンプルも同じ)
  margin : auto;  //表を中央に表示(以下のサンプルも同じ)
  border-spacing : 1em;  //セルの間隔を1文字分に
}
td{
  border:1px solid silver;  //1pxの銀色の枠線(以下のサンプルも同じ)
}
</style>

<table>
<tr><td>項目1</td><td>項目2</td></tr>
<tr><td>項目3</td><td>項目4</td></tr>
</table>
<表示結果>

枠線をまとめる

隣り合ったセルの枠線をまとめることができます。プロパティと値は以下の通りです。

border-collapse : separate/collapse
値にseparateを指定すると、各セルの枠線が表示されます。
値にcollapseを指定すると隣同士のセルの枠線が1本にまとめられます。

(サンプル)

<style>
table{
  border : 2px solid skyblue;
  border-collapse : collapse;  //セルの枠線をまとめる
  margin : auto;
}
td{
  border : 1px solid silver;
}
</style>

<table>
<tr><td>項目1</td><td>項目2</td></tr>
<tr><td>項目3</td><td>項目4</td></tr>
</table>
<表示結果>

縦揃え

テーブルセルに限るわけではありませんが、スタイルシートで縦位置を指定できるものがあります。プロパティと値は以下の通りです。

vertical-align
セル内の縦方向の配置を指定します。値には以下のようなものがあります。
top…セルの上端
middle…セルの中央
baseline…セルのベースライン
bottom…セルの下端

(サンプル)

<style>
table{
  border : 2px solid skyblue;
  margin : auto;
}
td{
  height : 5em;  //セルの高さを5文字分に
  border : 1px solid silver;
}
.top{ vertical-align : top; }  //縦位置をセル上端に
.mid{ vertical-align : middle; }  //縦位置をセルの中央へ
.bas{ vertical-align : baseline;}  //縦位置をベースラインに
.bot{ vertical-align : bottom; }  //縦位置をセルの下端に
</style>

<table>
<tr><td class="top">top</td><td class="mid">middle</td></tr>
<tr><td class="bas">baseline</td><td class="bot">bottom</td></tr>
</table>
<表示結果>

空白セルの表示方法

空白セルのの表示方法を指定することができます。プロパティと値は以下の通りです。

empty-cells : show/hide
値にshowを指定すると、空白セルも枠線や背景が表示されます。
値にhideを指定すると、空白セルの枠線や背景が非表示になります。

(サンプル)

<style>
table{
  border : 2px solid skyblue;
  margin : auto;
}
td{
  border : 1px solid silver;
  background-color : lightgreen;  //セルの背景色を薄緑に
}

.sho{ empty-cells : show; }  //空白セルを表示する
.hid{ empty-cells : hide;}  //空白セルを非表示にする
</style>

<table>
<tr><td>項目1</td><td class="sho"></td></tr>
<tr><td class="hid"></td><td>項目4</td></tr>
</table>
<表示結果>

タイトルの位置指定

表のタイトルを表示する位置を指定できます。プロパティと値は以下の通りです。

caption-side : top/bottom
値にtopを指定すると、表題が上に表示されます(初期値)。
値にbottomを指定すると、表題が下に表示されます。

(サンプル)

<style>
table{
  border : 2px solid skyblue;
  caption-side : bottom;  //表題を下に表示させる
  margin : auto;
}
td
{
  border : 1px solid silver;
}
</style>

<table>
<caption>表題</caption>
<tr><td>項目1</td><td>項目2</td></tr>
<tr><td>項目3</td><td>項目4</td></tr>
</table>
<表示結果>
data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">