תכונות 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 היא תכונת CSS הקובעת את שיטת הפריסה של טבלאות HTML. תכונה זו מאפשרת לך לקבוע כיצד לחשב את רוחבי העמודות בטבלה.
-
במחלקת
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.
-
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.
-
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 הוא מאפיין CSS להגדרת הרווח בין תאים בטבלה ב-HTML. המאפיין עוזר להתאים את הרווח בין תאי הטבלה ולשלוט בשוליים הוויזואליים. בדוגמה זו, נוסף רווח של 5px אופקית ו-20px אנכית בין התאים.
המאפיין border-spacing משפיע רק על טבלאות שבהן מוגדר border-collapse: separate;. אם border-collapse: collapse; מוגדר, מאפיין זה אינו משפיע.
שימוש
הערכים עבור המאפיין border-spacing מוגדרים בפיקסלים או ביחידות אורך אחרות. ניתן להגדירו בשני פורמטים הבאים:.
- ערך יחיד
1table {
2 border-spacing: 10px;
3}- כאשר מציינים ערך יחיד, המרווח בין שורות (למעלה ולמטה) ועמודות (שמאלה וימינה) מוגדר לאותו ערך.
בדוגמה זו, מרווח של 10px נוסף בין כל התאים.
- שני ערכים
1table {
2 border-spacing: 10px 20px;
3}- כאשר מציינים שני ערכים, הערך הראשון קובע את המרווח האופקי בין העמודות, והערך השני קובע את המרווח האנכי בין השורות.
בדוגמה זו, המרווח בין העמודות הוא 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 הוא מאפיין CSS המשמש לציון מיקום הכותרת (<caption> אלמנט) של טבלת HTML.
-
הגדרת
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 הוא מאפיין CSS המאפשר לשלוט האם תאים ריקים בטבלת HTML יוצגו. כברירת מחדל, תאים ריקים בטבלה מציגים גם גבולות, אך ניתן להשתמש במאפיין זה כדי לשלוט בתצוגה.
- הגדרת
showתציג גם תאים ריקים. זהו ההתנהגות המהווה ברירת מחדל. - הגדרת
hideתסתיר תאים ריקים. מסגרות ורקעים של התאים לא יימשכו.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.