القوائم والجداول

القوائم في HTML

في HTML، القوائم بتساعدك على تنظيم المحتوى وتقديمه بشكل مرتب وسهل القراءة. هناك نوعين رئيسيين من القوائم:

1. القوائم غير المرتبة (<ul>):
   • القوائم الغير مرتبة بتستخدم لعرض عناصر بدون ترتيب معين. بنستخدم <ul> لبدء القائمة و <li> لتمثيل كل عنصر داخلها.
   مثال: <ul> <li>العنصر الأول</li> <li>العنصر الثاني</li> <li>العنصر الثالث</li> </ul>
2. القوائم المرتبة (<ol>):
   • القوائم المرتبة بتستخدم لعرض عناصر بترتيب معين. بنستخدم <ol> لبدء القائمة و <li> لتمثيل كل عنصر داخلها.
   مثال: <ol> <li>العنصر الأول</li> <li>العنصر الثاني</li> <li>العنصر الثالث</li> </ol>
3. القوائم المدمجة:
   • ممكن تدمج القوائم المرتبة مع الغير مرتبة، زي ما في المثال ده:
   <ul> <li>العنصر الأول <ol> <li>العنصر الفرعي الأول</li> <li>العنصر الفرعي الثاني</li> </ol> </li> <li>العنصر الثاني</li> </ul>

الجداول في HTML

الجداول بتساعدك على تنظيم البيانات وعرضها بشكل مرتب. لتكوين جدول في HTML، هنحتاج إلى استخدام بعض العلامات الخاصة:

1. <table>:
   • بتستخدم علشان تبدأ الجدول.
2. <tr>:
   • بتستخدم لتحديد صف داخل الجدول.
3. <th>:
   • بتستخدم لتحديد رأس العمود داخل الجدول (غالبًا بيكون النص جريء ومركز).
4. <td>:
   • بتستخدم لتحديد الخلايا العادية في الجدول.

مثال على جدول بسيط:

<table border="1">
    <tr>
        <th>اسم الطالب</th>
        <th>الدرجة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>90</td>
    </tr>
    <tr>
        <td>مريم</td>
        <td>85</td>
    </tr>
</table>

في المثال ده:

• استخدمنا <table> لإنشاء الجدول.
• استخدمنا <tr> لإنشاء صفوف.
• استخدمنا <th> لرأس الجدول (اسم الطالب، الدرجة).
• استخدمنا <td> لتمثيل البيانات في الجدول (اسم الطالب والدرجة).

تخصيص الجدول:

1. إضافة حدود للجدول:
   يمكننا إضافة حدود للجدول باستخدام الخاصية border زي ما عملنا في المثال السابق.
2. دمج الخلايا (colspan و rowspan):
   • colspan: دمج الخلايا عبر الأعمدة.
   • rowspan: دمج الخلايا عبر الصفوف.

مثال:

<table border="1">
    <tr>
        <th colspan="2">معلومات الطالب</th>
    </tr>
    <tr>
        <td rowspan="2">أحمد</td>
        <td>90</td>
    </tr>
    <tr>
        <td>95</td>
    </tr>
</table>

---

في الختام:

دلوقتي، بقت عندك فكرة واضحة عن القوائم والجداول في HTML. القوائم هتساعدك لعرض عناصر من غير ترتيب أو بترتيب معين، والجداول هتساعدك على تنظيم البيانات في شكل مرئي مرتب. في المقالات الجاية هنتعرف على الروابط والصور في HTML. لو عندك أي استفسار أو محتاج توضيح أكتر، أنا موجود للمساعدة!