كود html لانشاء جدول مكون من 3 أعمدة و4 صفوف

    html table-جدول اتش تي ام ال

    كود جدول html:

    كود جدول html مكون من 3 أعمدة وأربعة صفوف لاسماء اشخاص واعمارهم , يوضع الكود داخل البودي "Body" بين علامتي الفتح والاغلاق وفي المكان الذي ترغب في وضعه.
    "tr" تشير للصفوف - يمكن اضافة صف جديد بنسخ كود "tr" من بدايتة وحتى اغلاقة .
    "th" تشير للخليه داخل الصف الاول وتشير للعمود أيضا - يمكن اضافة عمود بنسخ كود "th" من البداية وحتي النهاية وبعد ذلك تقوم بتغيير المحتوى .
    "td" تشير للخليه داخل الصف من الثاني وحتى الأخير وتشير للعمود أيضا - يمكن اضافة عمود بنسخ كود "td" من البداية وحتي النهاية وبعد ذلك تقوم بتغيير المحتوى .

    <table style="width:100%">
      <tr>
        <th>الاسم الاول</th>
        <th>الاسم الاخير</th>
        <th>العمر</th>
      </tr>
      <tr>
        <td>احمد</td>
        <td>علي</td>
        <td>10</td>
      </tr>
      <tr>
        <td>عمر</td>
        <td>عثمان</td>
        <td>20</td>
      </tr>
      <tr>
        <td>خالد</td>
        <td>مصطفى</td>
        <td>30</td>
      </tr>
    </table>

    * عند تطبيق كود html للجدول وعرضه يظهر كالتالي :
    الاسم الاول الاسم الاخير العمر
    احمد علي 10
    عمر عثمان 20
    خالد مصطفى 30

    *كود جدول html بعد اضافة عمود وصف جديدين :


    <table style="width:100%">
      <tr>
        <th>الاسم الاول</th>
        <th>الاسم الاخير</th>
        <th>العمر</th>
        <th>الوظيفة</th>
      </tr>
      <tr>
        <td>احمد</td>
        <td>علي</td>
        <td>10</td>
        <td>مبرمج</td>
      </tr>
      <tr>
        <td>عمر</td>
        <td>عثمان</td>
        <td>20</td>
        <td>مسوق</td>
      </tr>
      <tr>
        <td>خالد</td>
        <td>مصطفى</td>
        <td>30</td>
        <td>مصمم</td>
      </tr>
     <tr>
        <td>لؤي</td>
        <td>مجاهد</td>
        <td>40</td>
        <td>مندوب</td>
      </tr>
    </table>

    * عند تطبيق كود html للجدول الجديد وعرضه يظهر كالتالي :

    الاسم الاول الاسم الاخير العمر الوظيفة
    احمد علي 10 مبرمج
    عمر عثمان 20 مسوق
    خالد مصطفى 30 مصمم
    لؤي مجاهد 40 مندوب

    الدروس:

    ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
    شارك المقال

    مقالات متعلقة

    إرسال تعليق