HTML القوائم المرتبة

مفهوم القوائم المرتبة

القائمة المرتبة ( Ordered ) يقصد بها عرض مجموعة عناصر مع إظهار رقم كل عنصر تم إدخاله فيها.
من أهم ما يميز هذه القوائم أنه يمكنك عرض الترقيم بالشكل الذي تريده, فمثلاً يمكنك عرض أرقام عادية, أحرف أبجدية, أرقام رومانية إلخ..

إضافة قائمة مرتبة في الصفحة

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

معلومة: ol إختصار لكلمة Ordered التي تعني قائمة مرتبة و li إختصار لكلمة Item التي تعني عنصر في القائمة.

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

<ol>
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

أنواع الترقيم

لتحديد نوع الترقيم الذي سيظهر في بداية كل عنصر يمكنك إضافة الخاصية type للوسم <ol> و تمرير إحدى الأحرف التالية لها كقيمة:

• type="A" لإظهار ترقيم أبجدي بأحرف كبيرة قبل كل عنصر.
• type="a" لإظهار ترقيم أبجدي بأحرف صغيرة قبل كل عنصر.
• type="I" لإظهار ترقيم روماني بأحرف كبيرة قبل كل عنصر.
• type="i" لإظهار ترقيم روماني بأحرف صغيرة قبل كل عنصر.
• type="1" لإظهار ترقيم عادي قبل كل عنصر و هذه القيمة الإفتراضية التي يتم وضعها في حال لم تحدد القيمة بنفسك.

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف كبيرة.

<ol type="A">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم أبجدي بأحرف صغيرة.

<ol type="a">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف كبيرة.

<ol type="I">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

في المثال التالي قمنا بتغيير نوع الترقيم إلى ترقيم روماني بأحرف صغيرة.

<ol type="i">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

في المثال التالي قمنا بتحديد أن نوع الترقيم هو ترقيم عادي و بالطبع لن نلاحظ أي فرق لأن نوع الترقيم الإفتراضي في الأساس هو عددي.

<ol type="1">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

تحديد من أين يبدأ الترقيم

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

في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 5.

<ol start="5">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

في المثال التالي قمنا بتحديد أن الترقيم سيبدأ من الرقم 3 و أن نوع الترقيم سيكون أحرف إنجليزية صغيرة.

<ol start="3" type="a">
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
</ol>
		

جرب الكود

قطع الترقيم الحالي

في حال أردت تغيير قيمة الرقم الذي وصل إليه الترقيم إبتداءاً من عنصر محدد في القائمة فيمكنك إضافة الخاصية value للعنصر (أي للوسم <li>) و تمرير الرقم الذي تريده أن يبدأ من عنده.

في المثال التالي قمنا بتغيير الترقيم عند العنصر الرابع إلى 7.

<ol>
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
	<li value="7">Carrot</li>
	<li>Banana</li>
	<li>Peach</li>
</ol>
		

جرب الكود

وضع قائمة بداخل قائمة

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

في المثال التالي قمنا بتعريف عنصرين و كل عنصر وضعنا فيه قائمة أخرى.

<ol>
	<!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
	<li>Front-End
		<ol>
        	<li>HTML</li>
        	<li>CSS</li>
        	<li>Javascript</li>
        </ol>
	</li>
	<!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
	<li>Back-End
		<ol>
        	<li>MySQL</li>
        	<li>Aspnetcore</li>
        </ol>
	</li>
</ol>
		

جرب الكود