تعريفه
نستخدم الوسم <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>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mark</th>
</tr>
<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 {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}