جاري التحميل...

ترويسات الجداول في HTML

بعد أحجام الجداول، هذه الحصة تعلّم معنى التسميات: th وscope وcaption. المظهر يبقى في CSS؛ المعنى في HTML.

لماذا خلية الترويسة ليست مجرد `td` عريض

الأدوات المساعدة تعتمد على معنى th. تنسيق td الغامق قد يبدو مشابهاً دون أن يوضح العلاقة.

إجابة مباشرة

ضع تسميات الترويسة في th. استخدم scope="col" أو scope="row" عند الحاجة، و<caption> لعنوان الجدول. أبقِ القيم في td.

ترويسات أعمدة مع caption

صف ترويسة أعلى مع th scope="col" وcaption يسمّي الجدول.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

قراءة مثال الأعمدة

caption داخل table
أعلى الخلايا th scope="col"
الكميات في td
صفوف متساوية الطول

ترويسات صفوف للسجلات المسماة

اسم الصف يصبح th scope="row" ويمكن دمجه مع صف ترويسة أعمدة.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

قراءة مثال الصفوف

أعلى الجدول scope="col"
Ada وLin بـ scope="row"
النقاط في td

خريطة scope

استخدم الجدول المرجعي عندما تشك في القيمة.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

أتقن col وrow أولاً في هذه الدورة.

تمرين

جدول نادٍ بثلاثة أعمدة
أضف caption
th scope="col" للأعلى
th scope="row" للأسماء
أعد td مؤقتاً ولاحظ الفرق

أخطاء شائعة

td غامق بدل th
caption خارج الجدول
نسيان scope في الشبكات المختلطة
جعل كل الخلايا th

ملخص

th للترويسة
scope يوضح العمود أو الصف
caption يعنون الجدول
البيانات في td

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة