اخبار تقنية دروس وشروحات مهمة، سيو مواقع انترنت وقوالب

17‏/04‏/2017

كود 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 مندوب

الدروس:

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

ليست هناك تعليقات:

إرسال تعليق

اكتب تعليقك

المتابعة بالبريد الإلكتروني