テーブル関連のCSSプロパティ
この記事ではテーブル関連のCSSプロパティについて説明します。
テーブルのレイアウトや枠線、キャプション位置などのプロパティの利用方法や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-table.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-table.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Table Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Table Related Properties</h2>
20 </header>
21 <article>
22 <h3>table-layout</h3>
23 <section>
24 <header><h4>table-layout: auto</h4></header>
25 <section class="sample-view">
26 <table class="table-layout-auto">
27 <thead>
28 <tr>
29 <th>Column 1</th>
30 <th>Column 2</th>
31 <th>Column 3</th>
32 </tr>
33 </thead>
34 <tbody>
35 <tr>
36 <td>Short</td>
37 <td>Some longer content here</td>
38 <td>Content</td>
39 </tr>
40 <tr>
41 <td>Another short one</td>
42 <td>This is a much longer piece of text to demonstrate the auto layout</td>
43 <td>Short</td>
44 </tr>
45 </tbody>
46 </table>
47 </section>
48 </section>
49 <section>
50 <header><h4>table-layout: fixed</h4></header>
51 <section class="sample-view">
52 <table class="table-layout-fixed">
53 <thead>
54 <tr>
55 <th>Column 1</th>
56 <th>Column 2</th>
57 <th>Column 3</th>
58 </tr>
59 </thead>
60 <tbody>
61 <tr>
62 <td>Short</td>
63 <td>Some longer content here</td>
64 <td>Content</td>
65 </tr>
66 <tr>
67 <td>Another short one</td>
68 <td>This is a much longer piece of text to demonstrate the fixed layout</td>
69 <td>Short</td>
70 </tr>
71 </tbody>
72 </table>
73 </section>
74 </section>
75 </article>
76 <article>
77 <h3>border-collapse</h3>
78 <section>
79 <header><h4>border-collapse: separate</h4></header>
80 <section class="sample-view">
81 <table class="border-collapse-separate">
82 <thead>
83 <tr>
84 <th>Header 1</th>
85 <th>Header 2</th>
86 <th>Header 3</th>
87 </tr>
88 </thead>
89 <tbody>
90 <tr>
91 <td>Cell 1</td>
92 <td>Cell 2</td>
93 <td>Cell 3</td>
94 </tr>
95 <tr>
96 <td>Cell 4</td>
97 <td>Cell 5</td>
98 <td>Cell 6</td>
99 </tr>
100 </tbody>
101 </table>
102 </section>
103 </section>
104 <section>
105 <header><h4>border-collapse: collapse</h4></header>
106 <section class="sample-view">
107 <table class="border-collapse-collapse">
108 <thead>
109 <tr>
110 <th>Header 1</th>
111 <th>Header 2</th>
112 <th>Header 3</th>
113 </tr>
114 </thead>
115 <tbody>
116 <tr>
117 <td>Cell 1</td>
118 <td>Cell 2</td>
119 <td>Cell 3</td>
120 </tr>
121 <tr>
122 <td>Cell 4</td>
123 <td>Cell 5</td>
124 <td>Cell 6</td>
125 </tr>
126 </tbody>
127 </table>
128 </section>
129 </section>
130 </article>
131 <article>
132 <h3>border-spacing</h3>
133 <section>
134 <header><h4>border-spacing: 5px 20px</h4></header>
135 <section class="sample-view">
136 <table class="border-spacing-example">
137 <thead>
138 <tr>
139 <th>Header 1</th>
140 <th>Header 2</th>
141 <th>Header 3</th>
142 </tr>
143 </thead>
144 <tbody>
145 <tr>
146 <td>Cell 1</td>
147 <td>Cell 2</td>
148 <td>Cell 3</td>
149 </tr>
150 <tr>
151 <td>Cell 4</td>
152 <td>Cell 5</td>
153 <td>Cell 6</td>
154 </tr>
155 </tbody>
156 </table>
157 </section>
158 </section>
159 </article>
160 <article>
161 <h3>caption-side</h3>
162 <section>
163 <header><h4>caption-side: top</h4></header>
164 <section class="sample-view">
165 <table>
166 <caption class="caption-side-top">
167 Table Caption on Top
168 </caption>
169 <thead>
170 <tr>
171 <th>Header 1</th>
172 <th>Header 2</th>
173 <th>Header 3</th>
174 </tr>
175 </thead>
176 <tbody>
177 <tr>
178 <td>Data 1</td>
179 <td>Data 2</td>
180 <td>Data 3</td>
181 </tr>
182 <tr>
183 <td>Data 4</td>
184 <td>Data 5</td>
185 <td>Data 6</td>
186 </tr>
187 </tbody>
188 </table>
189 </section>
190 </section>
191 <section>
192 <header><h4>caption-side: bottom</h4></header>
193 <section class="sample-view">
194 <table>
195 <caption class="caption-side-bottom">
196 Table Caption on Bottom
197 </caption>
198 <thead>
199 <tr>
200 <th>Header 1</th>
201 <th>Header 2</th>
202 <th>Header 3</th>
203 </tr>
204 </thead>
205 <tbody>
206 <tr>
207 <td>Data 1</td>
208 <td>Data 2</td>
209 <td>Data 3</td>
210 </tr>
211 <tr>
212 <td>Data 4</td>
213 <td>Data 5</td>
214 <td>Data 6</td>
215 </tr>
216 </tbody>
217 </table>
218 </section>
219 </section>
220 </article>
221 <article>
222 <h3>empty-cells</h3>
223 <section>
224 <header><h4>empty-cells: show</h4></header>
225 <section class="sample-view">
226 <table class="empty-cells-show">
227 <tr>
228 <th>Header 1</th>
229 <th>Header 2</th>
230 <th>Header 3</th>
231 </tr>
232 <tr>
233 <td>Data 1</td>
234 <td></td> <!-- Empty cell -->
235 <td>Data 3</td>
236 </tr>
237 <tr>
238 <td>Data 4</td>
239 <td></td> <!-- Empty cell -->
240 <td>Data 6</td>
241 </tr>
242 </table>
243 </section>
244 </section>
245 <section>
246 <header><h4>empty-cells: hide</h4></header>
247 <section class="sample-view">
248 <table class="empty-cells-hide">
249 <tr>
250 <th>Header 1</th>
251 <th>Header 2</th>
252 <th>Header 3</th>
253 </tr>
254 <tr>
255 <td>Data 1</td>
256 <td></td> <!-- Empty cell -->
257 <td>Data 3</td>
258 </tr>
259 <tr>
260 <td>Data 4</td>
261 <td></td> <!-- Empty cell -->
262 <td>Data 6</td>
263 </tr>
264 </table>
265 </section>
266 </section>
267 </article>
268 </main>
269</body>
270</html>テーブルレイアウト
table-layout プロパティ
1table {
2 width: 100%;
3}
4
5th, td {
6 border: 1px solid black;
7 padding: 10px;
8}
9
10table.table-layout-auto {
11 border-collapse: collapse;
12 table-layout: auto;
13}
14
15table.table-layout-fixed {
16 border-collapse: collapse;
17 table-layout: fixed;
18}
19
20table.table-layout-fixed th {
21 width: 33.33%; /* Distribute width equally among 3 columns */
22}table-layout は、HTML テーブルのレイアウト方法を制御する CSS プロパティです。このプロパティを使用して、テーブルの列幅の計算方法を指定することができます。
-
table-layout-autoクラスでは、列の幅は各セル内のコンテンツに基づいて決定されます。 -
列幅は内容によって異なり、長い内容を持つセルはその列を広くします。
-
table-layout-fixedクラスでは、table-layout: fixedを使用しています。 -
各列の幅は均等に設定されており、内容が長くても幅は変わりません。
table-layout の値
1table {
2 table-layout: auto;
3}
4
5table {
6 table-layout: fixed;
7}table-layout には主にautoとfixedの2つの値があります。
-
auto（デフォルト値）:autoを指定するとテーブルの列幅は、内容に基づいて自動的に調整されます。- ブラウザは、各セルのコンテンツをすべて読み込み、その内容に基づいて各列の幅を決定します。
- これにより、テーブル全体の描画が遅くなることがあります。
-
fixed:fixedを指定すると、各列の幅は最初の行にあるセルの幅やwidth属性によって決定されます。- テーブル全体がすぐに描画され、コンテンツをすべて読み込まなくても、列の幅がすぐに決定されます。
- テーブル内のデータが多い場合でも、パフォーマンスが向上します。
table-layout: auto と table-layout: fixed の違い
autoの場合、テーブルの幅は、内容に応じて自動的に調整されます。より動的なレイアウトが可能ですが、複雑なテーブルではパフォーマンスが悪くなる可能性があります。fixedの場合、列幅は固定されており、テーブルの内容にかかわらず一貫したレイアウトを保ちます。パフォーマンスが向上しますが、内容が幅に収まらない場合は切り捨てられる可能性があります。
border-collapse プロパティ
1table.border-collapse-separate {
2 border-collapse: separate;
3 border-spacing: 10px; /* Set space between cells */
4}
5
6table.border-collapse-collapse {
7 border-collapse: collapse;
8}border-collapse は、テーブルのセル間の境界線（ボーダー）の表示方法を制御する CSS プロパティです。テーブルのセル同士の境界線がどのように表示されるかを定義する際に使用されます。
-
border-collapse: separateを使用すると、セルの間に明確な境界線とスペースができます。セル同士の間隔はborder-spacingプロパティで調整します。この例では、各セルの間に 10px のスペースを設定しています。 -
border-collapse: collapseを使用すると、隣接するセルの境界線が結合され、一つの境界線として表示されます。結果として、テーブルがより統一感のあるデザインになります。
この例のようにborder-collapse プロパティには、主にseparateとcollapseの2つの値があります。
-
separate（デフォルト値）:separateを指定すると各セルの境界線が別々に描画され、セル同士の間にスペースが存在します。- セルの境界線が離れて表示されるため、より明確に境界を区別したいときに使用します。
- セル間のスペースは、
border-spacingプロパティで調整可能です。
-
collapse:collapseを指定すると隣接するセルの境界線が結合され、一つの境界線として表示されます。- 境界線が重なって表示されるため、テーブル全体が一体感のある見た目になります。
- テーブルの行と列がスッキリ表示され、よりシンプルなデザインに適しています。
border-spacingプロパティ
1table.border-spacing-example {
2 border-collapse: separate;
3
4 /* Set 5px spacing between columns and 20px spacing between rows */
5 border-spacing: 5px 20px;
6}border-spacingプロパティは、HTMLテーブルにおいてセル同士の間隔を指定するための CSS プロパティです。テーブルセルの間のスペースを調整し、見た目の余白をコントロールするのに役立ちます。この例では、セルの間隔が横に5px、縦に20px追加されています。
border-spacingプロパティは、border-collapse: separate; が指定されているテーブルに対してのみ効果があります。border-collapse: collapse; が指定されている場合、このプロパティは無効です。
使い方
border-spacingプロパティの値はピクセルや他の長さの単位で指定します。以下の2つの形式で指定できます。
- 1つの値
1table {
2 border-spacing: 10px;
3}- 1つの値を指定した場合、行間（上下）と列間（左右）の間隔を同じ値に設定します。
この例では、すべてのセルの間に10pxのスペースが追加されます。
- 2つの値
1table {
2 border-spacing: 10px 20px;
3}- 2つの値を指定した場合、最初の値が列の横方向の間隔、2番目の値が行の縦方向の間隔を指定します。
この例では、列間のスペースは10px、行間のスペースは20pxになります。
caption-side プロパティ
1caption.caption-side-top {
2 caption-side: top; /* Display the caption at the top of the table */
3 font-weight: bold;
4 font-size: 1.2em;
5 margin-bottom: 10px;
6 background-color: #ccc;
7}
8
9caption.caption-side-bottom {
10 caption-side: bottom; /* Display the caption at the bottom of the table */
11 font-weight: bold;
12 font-size: 1.2em;
13 margin-top: 10px;
14 background-color: #ccc;
15}caption-sideプロパティは、HTMLテーブルのキャプション（<caption> 要素）をテーブルのどこに表示するかを指定するための CSS プロパティです。
-
**
top**を指定すると、キャプションをテーブルの上部に表示します。- デフォルト設定であり、キャプションはテーブルのタイトルや説明として使われることが多いです。
-
**
bottom**を指定すると、キャプションをテーブルの下部に表示します。- テーブルの下に説明を配置したい場合に使用します。
empty-cells プロパティ
1table.empty-cells-show {
2 empty-cells: show; /* Display empty cells */
3}
4
5table.empty-cells-hide {
6 empty-cells: hide; /* Display empty cells */
7}empty-cells は、HTML テーブルの空のセルを表示するかどうかを制御するための CSS プロパティです。デフォルトでは、テーブルの空のセルも枠線（ボーダー）が表示されますが、このプロパティを使って表示を制御できます。
- **
show**を指定すると、空のセルも表示します。これはデフォルトの動作です。 - **
hide**を指定すると、空のセルを非表示にします。セルの境界線や背景が描画されません。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。