備忘録的プログラミングリファレンス

表のスタイル

　表 <table> に使用できる主な CSS プロパティ、擬似クラスには以下があります。

　border は border-* によって罫線を更に詳細に設定できます。

　背景のための background プロパティや位置の調整のための margin、padding、コンテンツ配置のための text-align といったプロパティも使用できます。

セルの CSS

　表のセルの装飾にはセルの内容が空の場合には罫線を表示しない empty-cells、 セルの大きさを固定化する table-layout プロパティがあります。

empty-cells プロパティ

　empty-cells プロパティは、<table>エレメントのセルの内容が空の場合に罫線を表示するか、しないかを設定するプロパティです。

empty-cells プロパティなし
項目項目項目
データデータデータ
データ
empty-cells プロパティあり
項目項目項目
データデータデータ
データ

　上記の例では、上は empty-cells プロパティを指定していません。下は指定しているために罫線は表示されていません。

　詳しくは empty-cells プロパティを参照してください。

table-layout プロパティ

　table-layout プロパティは、テーブルのセルである <th> や <td> エレメントの大きさを内容に合わせるのか固定するかを指定するプロパティです。

　デフォルトではautoになっており、内容に合わせてセルの大きさが決まります。

table-layout:auto; デフォルト
table-layout:auto; の効果table-layout:fixed; の効果
table の大きさは auto では内容に合わせられますfixed では table の大きさは固定され内容は省略されます
table-layout:fixed;
table-layout:auto; の効果table-layout:fixed; の効果
table の大きさは auto では内容に合わせられますfixed では table の大きさは固定され内容は省略されます

　上記の例では、上は table-layout:auto; です。下は table-layout:fixed; です。

　詳しくは table-layout プロパティを参照してください。

　位置の調整のための margin、padding やコンテンツ配置のための text-align といったプロパティも使用できます。セルごとの背景を background プロパティで変更することもできます。

罫線

　<table> タグにおける罫線は border プロパティによって指定するのですが、この <table> タグにおける border の表示方法を border-collapse や border-spacing によって変更することができます。
　border-collapse は <table> とセルごとの罫線を1つに表示します。
　border-spacing は <table> の罫線と中のセルごとの罫線の間の大きさを指定します。

border-collapse プロパティ

　border-collapse は、デフォルトでは <table> の罫線と中のセルごとの罫線は別々に表示されるのですが、これらを1つに表示します。

　以下の例では下の <table> がborder-collapse:collapse;に指定してあります。

border-collapse:separate; デフォルト
項目項目項目
データデータデータ
データデータデータ
border-collapse:collapse;
項目項目項目
データデータデータ
データデータデータ

　詳しくは border-collapse プロパティを参照してください。

border-spacing プロパティ

　border-spacing は、<table> の罫線と中のセルごとの罫線の間の大きさを指定することができます。

　以下の例では下の <table> がborder-spacing: 5px 15px;に指定してあります。

デフォルト
項目項目項目
データデータデータ
データデータデータ
border-spacing: 5px 15px;
項目項目項目
データデータデータ
データデータデータ

　1つ目の引数が横の幅で、2つ目の引数が縦の幅です。1つだけ指定すると縦、横で同じ幅になります。詳しくは border-spacing プロパティを参照してください。

キャプション　caption-side

　<caption> タグは <table> に見出しを付加するためのタグエレメントです。
　caption-side プロパティは、<caption> の上側または下側といった表示位置を指定します。

caption-side: top; デフォルト
テーブルの見出し
項目項目
データデータ
caption-side: bottom;
テーブルの見出し
項目項目
データデータ

　詳しくは caption-side プロパティを参照してください。

行ごと、列ごとの背景

　<table> の行やセルごとに背景色を変えるといった場合は :nth-child() や :nth-of-type() 疑似クラスを使用します。

:nth-child( )疑似クラス

　:nth-child() 疑似クラスは引数に該当するエレメントに指定されたスタイルを反映します。
　このプロパティは対象となるエレメントが複数あることが条件です。

　引数をevenにすることで互い違いにスタイルを反映します。

:nth-child() なし
項目項目
データデータ
データデータ
データデータ
データデータ
:nth-child(even) あり
項目項目
データデータ
データデータ
データデータ
データデータ

　上記の例ではヘッダーエレメントの <th> の背景色を指定しています。
　<td> といったデータを行ごとにスタイルを指定し直すには <tbody> を付加する必要があります。

　詳しくは :nth-child() 疑似クラスを参照してください。

:nth-of-type() 疑似クラス

　:nth-of-type() 疑似クラスも引数に該当するエレメントに指定されたスタイルを反映します。
　この擬似クラスは１つしかなくてもスタイルを反映します。

:nth-of-type() なし
項目項目
データデータ
データデータ
データデータ
データデータ
:nth-of-type(even) あり
項目項目
データデータ
データデータ
データデータ
データデータ

　上記の例ではヘッダーエレメントの <th> の背景色を指定しています。
　<td> といったデータを行ごとにスタイルを指定し直すには <tbody> を付加する必要があります。

　詳しくは :nth-of-type() 疑似クラスを参照してください。