خصائص 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 على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔