<table>: عنصر TABLE
آخر تحديث: 2026-10-13
<table>عنصر TABLE
عنصر <table> يعرض البيانات في شكل جدول. يتكون من صفوف (<tr>) وخلايا (<td>/<th>)، وغالبًا مع <thead>/<tbody>/<caption>.
| الفئة | الجداول |
|---|---|
| نموذج المحتوى | اختياري <caption>، صفر+ <colgroup>، صفر+ <thead>/<tbody>/<tfoot>، <tr> |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </table> وسم |
| الحالة | قياسي |
📝 البنية
<table>
<tr>
<th>عنوان</th>
<td>بيانات</td>
</tr>
</table>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <table> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： لا تستخدم الجداول لتخطيط الصفحة (تنقل أو شريط جانبي) — هذا عمل CSS. الجداول للبيانات الجدولية فقط.
❓ الأسئلة الشائعة
Qهل ما زالت table تصلح لتخطيط الصفحات؟
Aلا، فهذه ممارسة تقادمت منذ أكثر من عقد — تخطيط الجداول يضر الوصولية وتوافق الهاتف والدلالات. الجداول للبيانات ثنائية الأبعاد الحقيقية فقط (كشوف الدرجات وقوائم الأسعار وجداول المقارنة). وأما التخطيط فلـ Flexbox وGrid.
Qهل يجب كتابة tbody لصفوف table؟
Aيمكن إغفاله — عند حذف tbody يغلف المحلل تلقائيًا
<tr> في tbody ضمني (موجود دومًا في DOM). وفائدة كتابته صراحة: إمكان تنسيقه منفردًا، والقيام بعمليات متقدمة كتثبيت الرأس مع thead/tfoot.Qكيف يُنجز جدول متجاوب؟
Aالجداول بطبعها ضعيفة في الشاشات الضيقة، والحلول الشائعة: حاوية خارجية بـ
overflow-x: auto للتمرير الأفقي (أبسطها)؛ تحويل الصفوف إلى بطاقات في الشاشات الضيقة (display: block + data-label)؛ تثبيت العمود الأول. وعند تجاوز خمسة أعمدة بيانات فضّل حل التمرير الأفقي.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
