You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h3>أ. ما هي استخدامات جداول اتش.تي.إم.إل HTML Tables ، وما هي الاستخدامات التي ينصح بتجنبها؟</h3>
37
+
38
+
<p>لم تعد "جداول اتش.تي.إم.إل" <b>HTML tables</b> شائعة الاستخدام كما كانت في السابق، ولكن كـ"مطور واجهات أمامية" <em>a frontend developer</em>، لا يزال من الضروري أن تكون على دراية بها. تُعد "الجداول" <em>Tables</em> من أوائل الطرق التي استخدمها "المطورون" <em>devs</em> لعرض "البيانات" <em>data</em> في "المتصفح" <em>a browser</em> في تسعينيات القرن الماضي.</p>
39
+
40
+
<h4>فيما يلي مثال على "الكود" <em>code</em> المستخدم لإنشاء "جدول" <em>a table</em> من "مكتب إحصاأت العمل الأمريكي" <i>the U.S. Bureau of Labor Statistics</i> :</h4>
<p>كما ترون، يوجد عنصر "جدول" <codeclass="br">table</code> رئيسي يحمل "المعرّف" <codeclass="br">id</code> هذا <codeclass="br">"quickfacts"</code>. ويحتوي هذا العنصر على عناصر فرعية هي: "رأس الجدول" <codeclass="br">thead</code>، و"جسم الجدول" <codeclass="br">tbody</code>، و"قاعدة الجدول" <codeclass="br">tfoot</code>.</p>
145
+
146
+
<p>عناصر "رأس الجدول" <em>table head</em>، و"جسمه" <em>body</em>، و"تذييله" <em>foot</em> يمكن أن تحتوي كل منها على عدد من "صفوف الجدول" <em>a table rows, <codeclass="br">tr</code></em>. ويحتوي كل "صف" <em>table row</em> على "رأس جدول" <em>a table header, <codeclass="br">th</code></em> يُحدد البيانات الموجودة فيه. كما يمكن أن يحتوي على عدد من "خلايا البيانات الفردية" <em>individual data cells</em>، تُسمى "بيانات الجدول" <em>called table data, <codeclass="br">td</code></em>.</p>
147
+
148
+
<p>هذا عدد كبير من "عناصر اتش.تي.إم.إل" <em>HTML elements</em> . لكن لا تدع الأمر يربكك – فهي تتبع "تسلسلاً هرمياً بسيطاً" <em>a simple hierarchy</em>.</p>
149
+
150
+
<h4>إليكم أبسط "جدول" table يمكننا إنشاؤه والذي يتضمن جميع هذه العناصر:</h4>
151
+
152
+
<divclass="code-block">
153
+
<pre><code>
154
+
<spanclass="tag"><table></span>
155
+
<spanclass="tag"><thead></span>
156
+
<spanclass="tag"><tr></span>
157
+
<spanclass="tag"><th><spanclass="txt">عنوان هذا الجدول</span></th></span>
<spanclass="tag"><th><spanclass="txt">.قد يحتوي "تذييل" هذا الجدول على تاريخ النشر، أو بيانات المؤلفين، أو معلومات تعريفية أخرى</span></th></span>
177
+
<spanclass="tag"></tr></span>
178
+
<spanclass="tag"></tfoot></span>
179
+
<spanclass="tag"></table></span>
180
+
</code></pre>
181
+
</div>
182
+
183
+
<h4>معاينة كود الجدول :</h4>
184
+
185
+
<divclass="preview" role="presentation">
186
+
<table>
187
+
<thead>
188
+
<tr>
189
+
<th>عنوان هذا الجدول</th>
190
+
</tr>
191
+
</thead>
192
+
<tbody>
193
+
<tr>
194
+
<th>الصف الأول</th>
195
+
<td>
196
+
خلية البيانات الأولى
197
+
</td>
198
+
</tr>
199
+
<tr>
200
+
<th>الصف الثاني</th>
201
+
<td>
202
+
خلية البيانات الثانية
203
+
</td>
204
+
</tr>
205
+
</tbody>
206
+
<tfoot>
207
+
<tr>
208
+
<th>قد يحتوي "تذييل" هذا الجدول على تاريخ النشر، أو بيانات المؤلفين، أو معلومات تعريفية أخرى.</th>
209
+
</tr>
210
+
</tfoot>
211
+
</table>
212
+
</div>
213
+
214
+
<p>كما ترون، فإن البيانات نفسها موجودة دائمًا داخل عنصر <codeclass="br">tr</code> – وداخل عنصر <codeclass="br">tr</code> هذا يوجد عنصر <codeclass="br">th</code> يحتوي على عنوان، وعنصر <codeclass="br">td</code> يحتوي على بيانات..</p>
215
+
216
+
<p>ستختار بعض المواقع الإلكترونية استخدام عناصر <codeclass="br">div</code> لإنشاء جداولها الخاصة بدلاً من استخدام عنصر "الجدول" <codeclass="br">table</code> الأكثر ملاءمة.</p>
217
+
218
+
<p>على الرغم من أنه من الممكن عرض "البيانات الجدولية" <em>tabular data</em> باستخدام عناصر <codeclass="br">div</code> العامة، إلا أنه لا يزال من الأفضل استخدام عنصر "الجدول" <codeclass="br">table</code> بدلاً من ذلك.</p>
219
+
220
+
<p>قبل سنوات عديدة، ربما استخدم المطورون "الجدول" <em>a <codeclass="br">table</code></em> لتحديد مواقع العناصر "الغير البياناتية" <i>non-data</i> على صفحات الويب. لم يُعتبر هذا الأسلوب من أفضل الممارسات آنذاك. لكن قد تصادف بعض "قواعد البيانات البرمجية" <em>codebases</em> التي لا تزال تستخدم "الجداول" <em>tables</em> بهذه الطريقة.</p>
221
+
222
+
<p>يستخدم المطورون اليوم تقنيتي <b>CSS flexbox</b> و <b>grid</b> لتصميم مواقعهم. وسنتناول هذه الأدوات بالتفصيل لاحقاً.</p>
223
+
224
+
<p>في الوقت الحالي، استخدم "جداول اتش.تي.إم.إل" <em>HTML tables</em> للغرض الأصلي المقصود منها: عرض البيانات الجدولية.</p>
225
+
226
+
227
+
<!-- QUESTIONS -->
228
+
<divclass="questions">
229
+
<h4>أسئلة :</h4>
230
+
231
+
232
+
<h5>في "جدول اتش.تي.إم.إل" HTML table ، ما هي العناصر الموجودة داخل عنصر <codeclass="br">tr</code> ؟</h5>
233
+
234
+
<p> ١. <codeclass="br">thead</code> و <codeclass="br">tfoot</code>. ❌</p>
235
+
<p><mark> ٢. <codeclass="br">td</code> و <codeclass="br">th</code>. ✅</mark></p>
236
+
<p> ٣. <codeclass="br">table</code> و <codeclass="br">tbody</code>. ❌</p>
237
+
<p> ٤. <codeclass="br">div</code> و <codeclass="br">span</code>. ❌</p>
238
+
239
+
240
+
<br>
241
+
242
+
<h5>ما هي "الأقسام الرئيسية" <em>the main sections</em> لـ"جدول اتش.تي.إم.إل" HTML table ؟</h5>
243
+
244
+
<p> ١. <codeclass="br">tabel</code> و <codeclass="br">div</code> و <codeclass="br">span</code>. ❌</p>
245
+
<p> ٢. <codeclass="br">header</code> و <codeclass="br">section</code> و <codeclass="br">footer</code>. ❌</p>
246
+
<p><mark> ٣. <codeclass="br">thead</code> و <codeclass="br">tbody</code> و <codeclass="br">tfoot</code>. ✅</mark></p>
247
+
<p> ٤. <codeclass="br">article</code> و <codeclass="br">aside</code> و <codeclass="br">nav</code>. ❌</p>
248
+
249
+
250
+
<br>
251
+
252
+
253
+
<h5>ما هو الاستخدام الرئيسي الموصى به لـ"جداول اتش.تي.إم.إل" HTML tables اليوم؟</h5>
254
+
255
+
<p> ١. إنشاء "تخطيطات الصفحات" <em>page layouts</em>. ❌</p>
256
+
<p><mark> ٢. عرض "البيانات الجدولية" <em>tabular data</em>. ✅</mark></p>
<pclass="support"><strong>مدعومة من منظمة <ahref="https://www.linkedin.com/company/openarabtech/" target=__blank>التقنية العربية المفتوحة Open Arab Tech</a>.</strong></p>
0 commit comments