tableタグを使う時に便利なCSSのプロパティ12選

表を作成する際に使用するtableタグですが「表の大きさを調整したい」「セルの大きさを変えたい」「文字を中央寄せにしたい」など細やかな悩みが付きものです。こういったレイアウトやデザインの悩みを解決してくれるCSSのプロパティを特集してみました。

表の幅、高さを指定する width height
表の境界線の太さ、色、スタイルを指定する border
境界線の結合、分離を指定する border-collapse
境界線の間隔を指定する border-spacing
表のレイアウト方法を指定する table-layout
空セルの境界線の表示・非表示を指定する empty-cells
表タイトルの位置を指定する caption-side
セル内の文字の位置を指定する text-align vertical-align
セル内の余白を指定する padding
セル内で自動改行させる、させない white-space
表の背景色を指定する background-color
表の背景に画像を使う background-image

表の幅、高さを指定する width height

表の幅は width 、表の高さは height というプロパティを使用することで調整することができます。このプロパティはtable要素の他にもth要素やtd要素に適用することもできます。

table {
width: 625px;
height: 400px;
}

上記の例だと表全体の幅を625px、高さを400pxに指定しています。

幅、高さはpx（ピクセル）などの単位または%（パーセント）で指定することができます。

表の境界線の太さ、色、スタイルを指定する border

表の境界線は border プロパティで指定することができます。

太さはpx（ピクセル）などの単位、色はカラーコード、スタイルはsolid（1本線）、double（2本線）、dotted（点線）、その他 groove、ridge、inset、outset、dashed から指定することができます。

table {
border: 2px #333333 solid;
}

見出しセル1	見出しセル2
データセル1	データセル2

tableタグのみに指定すると上記のようにテーブルと周りの境界線を

th, td {
border: 2px #333333 solid;
}

見出しセル1	見出しセル2
データセル1	データセル2

th、tdタグのみに指定すると上記のように各セルと周りの境界線を

table, th, td {
border: 2px #333333 solid;
}

見出しセル1	見出しセル2
データセル1	データセル2

table、th、td全てに指定すると表全体と各セルの境界線を指定できます。

※border-collapseプロパティで collapse（境界線を結合）を指定している場合境界線が重なり、th、tdタグのみに境界線を指定した場合と同様に表示されます。

境界線の結合、分離を指定する border-collapse

border-collapse では隣接する境界線を結合するか、分離させるかを指定することができます。

値をcollapseとすると隣接する境界線を結合して、separateとすると分離して表示します。

table, th, td {
border: 2px #333333 solid;
border-collapse: collapse;
}

見出しセル1	見出しセル2
データセル1	データセル2

table, th, td {
border: 2px #333333 solid;
border-collapse: separate;
}

見出しセル1	見出しセル2
データセル1	データセル2

境界線の間隔を指定する border-spacing

border-spacing では境界線の間隔を指定することができます。このスタイルはtable要素に適用することができます。

table {
border-spacing: 20px 10px;
}

見出しセル1	見出しセル2
データセル1	データセル2

上記の例では左右に20px、上下に10pxの間隔をあけるよう指定しています。

表のレイアウト方法を指定する table-layout

table-layout は表のレイアウトを指定するプロパティです。このスタイルはtable要素に適用することができます。

table {
width: 625px;
table-layout: auto;
}

艦種	主な攻撃方法	概要
戦艦	砲撃	大型の砲による長距離砲撃の大火力と自身の主砲に耐えうる重装甲が強み。
航空母艦	艦載機による雷撃・爆撃	遠距離から艦載機による命中精度の高い攻撃を行えるのが強み。
駆逐艦	砲撃・雷撃	小型で機動力と燃費に優れ主に主力艦や輸送船の護衛任務に起用される。

値を auto とすると自動レイアウトアルゴリズムを使用し、表全体のデータを読み込んでからセルの内容に合わせて表の表示を開始します。つまり上記のように各セルの内容に合わせてセルの幅が自動的に調整されます。

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

艦種	攻撃方法	概要
戦艦	砲撃	大型の砲による長距離砲撃の大火力と自身の主砲に耐えうる重装甲が強み。
航空母艦	艦載機による雷撃・爆撃	遠距離から艦載機による命中精度の高い攻撃を行えるのが強み。
駆逐艦	砲撃・雷撃	小型で機動力と燃費に優れ主に主力艦や輸送船の護衛任務に起用される。

fixed とすると最初の一行目を読み込んだの内容に合わせて各セルの幅を調整します。fixed を指定する場合は表全体の幅を指定しておく必要があります。各セルの幅はCSSで自由に指定することができ、指定されていない列には残りの幅が均等に割り当てられます。

自動レイアウトアルゴリズムに比べ表示速度が早くなりますが、一般的な数十行程度の表では体感できるほどの違いはありません。

auto、fixed いずれの場合も行の高さは自動的に算出されます。

空セルの境界線の表示・非表示を指定する empty-cells

empty-cells では空セル（visibilityプロパティがhiddenに指定されたセルも含む）の境界線（ボーダー）の表示・非表示を指定することができます。このスタイルはtd要素とth要素に適用することができます。（table要素に設定するとその表内の全てのセルに適用されます）

値を show とすると境界線を表示し、hide とすると非表示とします。

empty-cellsプロパティはborder-collapseプロパティの値がseparate（隣接する境界線を分離する）の時のみ有効となります。

table {
empty-cells: hide;
}

見出しセル1
	データセル1

表タイトルの位置を指定する caption-side

caption-side は表タイトルの位置を指定するプロパティです。このスタイルはcaption要素に適用することができます。

値はtop（表の上に配置）、bottom（表の下に配置）、left（表の左に配置）、right（表の右に配置）の4種類から選択します。

caption {
caption-side: top;
}

表タイトル
見出しセル1	見出しセル2
データセル1	データセル2

上記のようにtopを指定すると表の上に表タイトルを

caption {
caption-side: bottom;
}

表タイトル
見出しセル1	見出しセル2
データセル1	データセル2

bottomを指定すると表の下に表タイトルを表示します。

セル内の文字の位置を指定する text-align vertical-align

text-align、vertical-align はtd要素やth要素に対して設定することでそのセル内の文字の位置を指定することができるプロパティです。

td.1 { text-align: left; }
td.2 { text-align: center; }
td.3 { text-align: right; }

左寄せ

中央揃え

右寄せ

text-align は上記のようにセル内の文字の水平方向の位置を指定することができます。

td.1 { vertical-align: top; }
td.2 { vertical-align: middle; }
td.3 { vertical-align: bottom; }

上揃え

中央揃え

下揃え

vertical-align は上記のようにセル内の文字の垂直方向の位置を指定することができます。

セル内の余白を指定する padding

padding はtd要素やth要素に対して設定することでそのセル内の上下左右の余白を指定することができます。

padding: 5px; → 「上下左右」の余白を5pxに指定
padding: 5px 10px; → 「上下」の余白を5px、「左右」の余白を10pxに指定
padding: 2px 4px 6px; → 「上」の余白を2px、「左右」の余白を4px、「下」の余白を6pxに指定
padding: 2px 4px 6px 8px; → 「上」の余白を2px、「右」の余白を4px、「下」の余白を6px、「左」の余白を8pxに指定

td, th {
padding: 5px 10px;
}

見出しセル1	見出しセル2
データセル1	データセル2

セル内で自動改行させる、させない white-space

white-space プロパティの初期値は normal となっておりセルの幅に合わせて内容を自動的に改行しますが、値を nowrap とすることでセル内での自動改行を禁止することができます。

td.1 { white-space: normal; }
td.2 { white-space: nowrap; }

テストテストテストテストテストテストテストテストテストテスト

左が自動改行させた場合、右が自動改行を禁止した場合です。

表の背景色を指定する background-color

background-color は背景色を指定するプロパティです。

table要素、tr要素、td要素、th要素に対して設定すると該当部分の背景色を指定することができます。

td1 { background-color: #90c630; }

見出しセル1	見出しセル2
データセル1	データセル2

表の背景に画像を使う background-image

background-image は背景画像を指定するプロパティです。

table要素、tr要素、td要素、th要素に対して設定すると表の背景に画像を表示することができます。

td1 { background-image: url(star.gif); }

上記例の「star.gif」の位置に画像のURLを指定します。

見出しセル1	見出しセル2
データセル1	データセル2

背景画像によっては表の内容が非常に見づらくなってしまう場合もあります。背景画像にはなるべく色が薄く目立ちにくいものを使ったほうが良いでしょう。