- HOME
- ホームページ作成講座
- テーブルのスタイル設定
このページでは表（テーブル）に関連したスタイルの指定方法について説明します。
枠線の間隔の指定
スタイルシートでセルとセルの間隔を指定することができます。プロパティと値は以下の通りです。
- 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>項目１</td><td>項目２</td></tr>
<tr><td>項目３</td><td>項目４</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>項目１</td><td>項目２</td></tr>
<tr><td>項目３</td><td>項目４</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>項目１</td><td class="sho"></td></tr>
<tr><td class="hid"></td><td>項目４</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>項目１</td><td>項目２</td></tr>
<tr><td>項目３</td><td>項目４</td></tr>
</table>
＜表示結果＞