كورس HTML

شرح الوسم dd و td و col و colgroup و tbody و الوسم table في html

صورة
صدام العويري
اخر تحديث :

شرح الوسم<table> في HTML

تعريف الوسم <table>

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


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

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

  • <tr> لإضافة سطر فيه.

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

  • <td> لإضافة حقل عادي في السطر.


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

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

  • <caption> لإضافة وصف للجدول.

  • <colgroup> لتقسيم أعمدة الجدول لمجموعات بهدف تعديل تصميمها.

  • <thead> لتجميع الأسطر التي تحتوي العناوين بهدف تعديل تصميمها.

  • <tbody> لتجميع الأسطر التي تحتوي المعلومات العادية بهدف تعديل تصميمها.

  • <tfoot> لتجميع الأسطر التي نضعها في آخر الجدول بهدف تعديل تصميمها.

دعم المتصفحات للوسم <table>

الجدول التالي يظهر المتصفحات التي تدعم الوسم <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

خصائص الوسم <table>

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

إستخدام الوسم <table>

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

المثال الأول

				<table>
				
				<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Mark</th>
				</tr>
				
				<tr>
				<td>1</td>
				<td>alawiri saddam </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>

المخرجات:

ID Name Mark
1 alawiri saddam A
2 Rima Houssayni C
3 Youssef Jabber B


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

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

				<table>
				
				  
				  <tr>Final semester marks</tr>
				  
				  
				
				<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Mark</th>
				</tr>
				
				<tr>
				<td>1</td>
				<td>alawiri saddam </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 border="1">
				
				
				
				<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Mark</th>
				</tr>
				
				<tr>
				<td>1</td>
				<td>alawiri saddam </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>

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

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

شرح الوسم <td> في HTML

تعريف الوسم <td>

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

دعم المتصفحات للوسم <td>

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

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

خصائص الوسم <td>


الخاصية colspan

في حال أردت جعل الخانة تظهر على أكثر من عمود في نفس السطر يجب إضافة هذه الخاصية للوسم و إعطاءها رقم يمثل على كم عمود ستظهر كقيمة.
كمثال بسيط, إذا قلت <td colspan="2"> فهذا يجعل الخانة تظهر على عمودين في نفس السطر.

ملاحظة: أكبر قيمة يمكن تمريرها لها هي 1000, و في حال قمت بوضع قيمة أكبر من ذلك سيتم وضع القيمة الإفتراضية له و التي تساوي 1.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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


الخاصية rowspan

في حال أردت جعل الخانة تظهر على أكثر من سطر تحت نفس العمود يجب إضافة هذه الخاصية للوسم و إعطاءها رقم يمثل على كم سطر ستظهر كقيمة.
كمثال بسيط, إذا قلت <td rowspan="2"> فهذا يجعل الخانة تظهر على سطرين تحت نفس العمود.

ملاحظة: أكبر قيمة يمكن تمريرها لها هي 1000, و في حال قمت بوضع قيمة أكبر من ذلك سيتم وضع القيمة الإفتراضية له و التي تساوي 1.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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


الخاصية headers

يمكن إضافتها للوسم لربط الخانة العادية التي يمثّلها بالخانة التي تمثل عنوان الموضوعة ضمنها.
عند استخدام هذه الخاصية يجب تمرير id الخانة التي تمثل العنوان كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

إستخدام الوسم <td>

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

المثال الأول

				<table>
				<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
				<tr>
				<th>ID</th>
				<th>User</th>
				<th>Phone</th>
				</tr>
				<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				</tr>
				<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				</tr>
				</table>


في المثال التالي قمنا بجعل الخانة الثانية الموجودة في السطر الأخير تظهر على عمودين.

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

				<table>
				<tr>
				<th>ID</th>
				<th>User</th>
				<th>Phone</th>
				</tr>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				</tr>
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				</tr>
				<tr>
				<td>3</td>
				<td>hala</td>
				<td>76804712</td>
				</tr>
				<!-- في هذا السطر أضفنا خانتين فقط مع جعل الخانة الثانية تظهر تحت عمودين -->
				<tr>
				<td>Total Users</td>
				<td colspan="2">3</td>
				</tr>
				</table>


في المثال التالي قمنا بجعل الخانة الثانية الموجودة في السطر الثالث تظهر على السطر الثالث و الرابع.

المثال الثالث

				<table>
				<tr>
				<th>ID</th>
				<th>User</th>
				<th>Phone</th>
				<th>Status</th>
				</tr>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				<td>Registered</td>
				</tr>
				<!-- في هذا السطر جعلنا الخانة الأخيرة تظهر على سطرين تحت نفس العمود -->
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				<td rowspan="2">Not Registered</td>
				</tr>
				<tr>
				<td>3</td>
				<td>hala</td>
				<td>76804712</td>
				</tr>
				</table>


في المثال التالي قمنا بربط كل خانة عادية في الجدول بالخانة الموضوعة تحتها.
القيم الموضوعة لحقول الجدول في الخاصيتين id و headers لا تظهر أمام المستخدم و لكنها مفيدة فقط في حال كان المستخدم يعتمد على قارئ الشاشة ( Screen Reader ) لكي يقرأ له محتوى الصفحة حتى يخبره كل حقل في الجدول تحت أي حقل موضوع.

المثال الرابع

				<table>
				<!-- لكل خانة موضوعة كعنوان في الجدول id هنا قمنا بإعطاء -->
				<tr>
				<th id="id">ID</th>
				<th id="user">User</th>
				<th id="phone">Phone</th>
				</tr>
				<!-- headers الخانة كقيمة للخاصية id هنا قمنا بربط كل خانة عادية مع الخانة التي تمثل عنوان لها من خلال تمرير -->
				<tr>
				<td headers="id">1</td>
				<td headers="user">mhamad</td>
				<td headers="phone">70123456</td>
				</tr>
				<!-- headers الخانة كقيمة للخاصية id هنا قمنا بربط كل خانة عادية مع الخانة التي تمثل عنوان لها من خلال تمرير -->
				<tr>
				<td headers="id">2</td>
				<td headers="users">mira</td>
				<td headers="phone">03102013</td>
				</tr>
				</table>

التصميم الإفتراضي للوسم <td>

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

			  td {
			  display: table-cell;
			  vertical-align: inherit;
			  }

شرح الوسم <tbody>  في HTML

تعريف الوسم <tbody>

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


معلومة تقنية

في العادة عند تجميع سطر في الجدول أو بعض أسطره داخل هذا الوسم فإننا نقوم بتجميع باقي الأسطر بداخل وسوم أخرى هي الوسم <thead> الذي نضع فيه السطر أو الأسطر التي تعتبر بمثابة عناوين فيه, و الوسم <tfoot> الذي نضع فيه السطر أول الأسطر التي نضعها في آخره في حال كنا سنعرض نتائج فيها.

دعم المتصفحات للوسم <td>

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

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

خصائص الوسم <tbody>

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

إستخدام الوسم <tbody>

في المثال التالي قمنا بإنشاء جدول يتألف من 5 أسطر مع تجميع أسطره على النحو التالي:

  • السطر الأول وضعناه بداخل وسم <thead> لأنه يحتوي عنواين أسطر الجدول.

  • الأسطر التي تليه وضعناه بداخل وسم <tbody> لأنه تحتوي معلومات الجدول العادية.

  • السطر الأخير وضعناه بداخل وسم <tfoot> لأنه يحتوي النتائج النهائية لمعلومات الجدول.

جميع الخانات التي قمنا بوضعها في الجدول سيتم إعطاؤها تصميم بشكل تلقائي نسبةً لكود التصميم الذي وضعناه للوسم <thead> و <tbody> و <tfoot> التي وضعناها بداخلها.

مثال

				<table>
				<!-- <thead> السطر الأول في الجدول وضعناه بداخل الوسم -->
				<thead>
				<tr>
				<th>ID</th>
				<th>Name</th>
				</tr>
				<thead>
				<!-- <thead> الأسطر التي تحتوي معلومات عادية في الجدول وضعناها بداخل الوسم -->
				<tbody>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				</tr>
				<tr>
				<td>2</td>
				<td>rima</td>
				</tr>
				<tr>
				<td>3</td>
				<td>youssef</td>
				</tr>
				</tbody>
				<!-- <tfoot> السطر الأخير في الجدول وضعناه بداخل الوسم -->
				</tfoot>
				<tr>
				<td>Total</td>
				<td>3 users</td>
				</tr>
				</tfoot>
				</table>

التصميم الإفتراضي للوسم <tbody>

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

			  tbody {
			  display: table-row-group;
			  vertical-align: middle;
			  border-color: inherit;
			  }

شرح الوسم <colgroup> في HTML

تعريف الوسم <colgroup>

نستخدم الوسم <colgroup> لتقسيم أعمدة الجدول إلى مجموعات بهدف تعديل خصائص ظهورها مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.

إستخدام الوسم <colgroup> لوحده يتيح لك تقسيم الجدول لمجموعتين كحد أقصى و هذا في الأغلب غير مفيد.
لتقسيم أعمدة الجدول بحرية مطلقة نستخدم وسوم <col> بداخله على النحو التالي.

			  <table>
			  <colgroup>
			  <col>
			  <col>
			  ...
			  </colgroup>
			  </table>

دعم المتصفحات للوسم <colgroup>

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

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

خصائص الوسم <colgroup>

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية span

في حال عدم وضع أي وسم <col> بداخل الوسم <colgroup> يمكن إضافتها له لتحديد عدد الأعمدة في المجموعة كم سيكون.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

ملاحظة

الوسمين <colgroup> و <col> كلاهما يملكان الخاصية span و في الحالتين فإن هذا الخاصية تستخدم لتحديد عدد الأعمدة التابعة لنفس المجموعة.

الفرق الوحيد بالنسبة للوسم <colgroup> هو أن هذه الخاصية يمكن استخدامها لتحديد عدد أعمدة المجموعة الأولى فيه فقط.

إستخدام الوسم <colgroup>

في المثال التالي قمنا بإنشاء جدول يتألف من 3 أعمدة, و قمنا بتقسيم أعمدته لمجموعتين كالتالي:

  • المجموعة الأولى تتألف من أول و ثاني عمود و لون خلفيتها جعلناه أزرق باهت.

  • المجموعة الثانية تتألف من ثالث عمود (أي العامود المتبقي) و لون خلفيته هو اللون الإفتراضي للجدول.

ملاحظة: الخاصية style أضفناها للوسم <colgroup> لتحديد لوان خلفية المجموعة التي يمثلها بشكل مباشر بواسطة الخاصية background-color بلغة CSS.

مثال

				<table>
				<colgroup span="2" style="background-color: #d7d9f2;"></colgroup>
				</table>


في المثال التالي قمنا بإنشاء جدول يتألف من 4 أعمدة, و قمنا بتقسيم أعمدته لثلاث مجموعات كالتالي:

  • المجموعة الأولى تتألف من أول عمود و لم نجري أي تعديل على تصميمها.

  • المجموعة الثانية تتألف من العمودين الثاني و الثالث و لون خلفيتها جعلناه أزرق باهت.

  • المجموعة الثالثة تتألف من رابع عمود و لون خلفيتها جعلناه أحمر باهت.

ملاحظة: الخاصية style أضفناها في الوسم <col> الثاني و الثالث لتحديد لون الخلفية بشكل مباشر بواسطة الخاصية background-color بلغة CSS.

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

				<table>
				<colgroup>
				<col>
				<col span="2" style="background-color: #d7d9f2;">
				<col style="background-color: #ffe8d4;">
				</colgroup>
				</table>

التصميم الإفتراضي للوسم <colgroup>

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

			  colgroup {
			  display: table-column-group;
			  }

شرح الوسم <col> في HTMl

تعريف الوسم <col>

في حال كانت أعمدة الجدول مقسمة لمجموعات بواسطة الوسم <colgroup> يمكن استخدام وسوم <col> على النحو التالي لتحديد خصائص ظهور الأعمدة الموضوعة في نفس المجموعة مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.

			  <table>
			  <colgroup>
			  <col>
			  <col>
			  ...
			  </colgroup>
			  </table>

بشكل عام, الوسم <col> يمثل عامود واحد في الجدول في حال لم تحدد أنه يشير لأكثر من واحد.
و يمكنك وضع العدد الذي تريده من الوسوم <col> و تمرير خصائص CSS لهم بالشكل الذي تريده.

دعم المتصفحات للوسم <col>

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

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

خصائص الوسم <col>

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية span

يمكن إضافتها للوسم بهدف جعل الوسم <col> يشير لأكثر من عمود في الجدول.
الرقم الذي تمرره لها كقيمة يمثل عدد الأعمدة التي سيتم وضعها ضمن نفس المجموعة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

إستخدام الوسم <col>

في المثال التالي قمنا بإنشاء جدول يتألف من 4 أعمدة, و قمنا بتقسيم أعمدته لثلاث مجموعات كالتالي:

  • المجموعة الأولى تتألف من أول عمود و لم نجري أي تعديل على تصميمها.

  • المجموعة الثانية تتألف من العمودين الثاني و الثالث و لون خلفيتها جعلناه أزرق باهت.

  • المجموعة الثالثة تتألف من رابع عمود و لون خلفيتها جعلناه أحمر باهت.

ملاحظة: الخاصية style أضفناها في الوسم <col> الثاني و الثالث لتحديد لون الخلفية بشكل مباشر بواسطة الخاصية background-color بلغة CSS.

المثال الأول

				<table>
				<colgroup>
				<col>
				<col span="2" style="background-color: #d7d9f2;">
				<col style="background-color: #ffe8d4;">
				</colgroup>
				</table>


في المثال التالي قمنا بتقسيم الجدول تماماً كما فعلنا في المثال السابق و لكننا هذه المرة قمنا بتحسين تصميم الجدول كله حتى تظهر فائدة تقسيم الأعمدة بشكل أوضح.

ملاحظة: الخاصية class أضفناها في الوسم <col> الثاني و الثالث لتحديد إسم الكلاس الذي يملك الخائص التي نريد لكل عامود أن يطبقها و هذا الأمر لا تشغل بالك به كثيراً لأنك ستفهمه بسهولة حين تدرس لغة CSS.

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

				<style>
				.names {
				background-color: #d7d9f2;
				}

				.marks {
				background-color: #ffe8d4;
				}
				</style>
				..
				<table>
				<colgroup>
				<col>
				<col span="2" class="names">
				<col class="marks">
				</colgroup>
				</table>

التصميم الإفتراضي للوسم <col>

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

			  col {
			  display: table-column;
			  }

شرح الوسم <dd> في HTML

تعريف الوسم <dd>

نستخدم الوسم <dt> بداخل قوائم الوصف لإضافة شرح لمصطلح أو خيار يندرج موضوع قبله على النحو التالي.

			  <dl>
			  <dt></dt>
			  <dd></dd>
			  <dd></dd>
			  ..
			  </dl>

  • <dl> </dl> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف.

  • <dt> </dt> تستخدمه لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة.

  • <dd> </dd> تستخدمه لإضافة شرح للمصطلح أو خيار يندرج تحته.

ملاحظة: ليس شرطاً أن يكون المحتوىى الذي تضعه بداخل الوسم <dd> عبارة نص فقط فمثلاً يمكنك وضع صورة, رابط أو حتى قائمة بداخله.

دعم المتصفحات للوسم <dd>

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

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

خصائص الوسم <dd>

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

إستخدام الوسم <dd>

في المثال التالي قمنا بإضافة قائمة وصف بداخلها عنوانين و خمس خيارات.

مثال

				<dl>
				<dt>Hot Drinks</dt>
				<dd>- Coffee</dd>
				<dd>- Nescafe</dd>
				<dd>- Tee</dd>
				<dt>Cold Drinks</dt>
				<dd>- Red Bull</dd>
				<dd>- Pepsi</dd>
				</dl>

التصميم الإفتراضي للوسم <dd>

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

			  dd {
			  display: block;
			  margin-left: 40px;
			  }

شرح الوسم <dt> في HTML

تعريف الوسم <dt>

نستخدم الوسم <dt> بداخل قوائم الوصف لإضافة مصطلح أو عنوان على النحو التالي.

			  <dl>
			  <dt></dt>
			  <dd></dd>
			  <dd></dd>
			  ..
			  </dl>

  • <dl> </dl> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف.

  • <dt> </dt> تستخدمه لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة.

  • <dd> </dd> تستخدمه لإضافة شرح للمصطلح أو خيار يندرج تحته.

ملاحظة: ليس شرطاً أن يكون المحتوىى الذي تضعه بداخل الوسم <dt> عبارة نص فقط فمثلاً يمكنك وضع صورة أو رابط بداخله.

دعم المتصفحات للوسم <dt>

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

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

خصائص الوسم <dt>

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

إستخدام الوسم <dt>

في المثال التالي قمنا بإضافة قائمة وصف بداخلها عنوانين و خمس خيارات.

مثال

				<dl>
				<dt>Hot Drinks</dt>
				<dd>- Coffee</dd>
				<dd>- Nescafe</dd>
				<dd>- Tee</dd>
				<dt>Cold Drinks</dt>
				<dd>- Red Bull</dd>
				<dd>- Pepsi</dd>
				</dl>

التصميم الإفتراضي الوسم <dt>

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

			  dd {
			  display: block;
			  }
تعديل المقال
الأقسام

مقالات قد تهمك