- 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>項目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>
<表示結果>