Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <table>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

نستخدم الوسم <table> لعرض جدول في الصفحة.
ملاحظة: الجدول لا يظهر أي خطوط حول الأسطر و الأعمدة الموضوعة فيه إلا إن قمت بتعديل تصميمه بواسطة CSS.


وسوم أساسية نضيفها في الجدول

بداخل الوسم <table> نستخدم الوسوم التالية بهدف تحديد طريقة بنائه:

  • <tr> لإضافة سطر فيه.
  • <th> لإضافة حقل عبارة عن عنوان في السطر.
  • <td> لإضافة حقل عادي في السطر.

وسوم إختيارية نضيفها في الجدول

بداخل الوسم <table> يمكن إضافة الوسوم التالية بهدف تحسين طريقة ظهوره:

  • <caption> لإضافة وصف للجدول.
  • <colgroup> لتقسيم أعمدة الجدول لمجموعات بهدف تعديل تصميمها.
  • <thead> لتجميع الأسطر التي تحتوي العناوين بهدف تعديل تصميمها.
  • <tbody> لتجميع الأسطر التي تحتوي المعلومات العادية بهدف تعديل تصميمها.
  • <tfoot> لتجميع الأسطر التي نضعها في آخر الجدول بهدف تعديل تصميمها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <table>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم 1 18 4 مدعوم مدعوم 1.0

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

المثال الأول

<table>
<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
<tr>
<th>ID</th>
<th>Name</th>
<th>Mark</th>
</tr>
<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
<tr>
<td>1</td>
<td>Mhamad Harmush</td>
<td>A</td>
</tr>
<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
<tr>
<td>2</td>
<td>Rima Houssayni</td>
<td>C</td>
</tr>
<!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية -->
<tr>
<td>3</td>
<td>Youssef Jabber</td>
<td>B</td>
</tr>
</table>
<table> <!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين --> <tr> <th>ID</th> <th>Name</th> <th>Mark</th> </tr> <!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>1</td> <td>Mhamad Harmush</td> <td>A</td> </tr> <!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>2</td> <td>Rima Houssayni</td> <td>C</td> </tr> <!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>3</td> <td>Youssef Jabber</td> <td>B</td> </tr> </table>

جرب الكود



في المثال التالي قمنا بإضافة عنوان للجدول.

المثال الثاني

<table>
<!-- هنا قمنا بوضع وصف للجدول -->
<tr>Final semester marks</tr>
...
</table>
<table> <!-- هنا قمنا بوضع وصف للجدول --> <tr>Final semester marks</tr> ... </table>

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة