القائمة الرئيسية

الصفحات

آخر الأخبار

تعلم لغة البرمجة للمبتدئين لغة html الدرس (12)

 الجداول في لغة HTML

html table
html table

الجدول الأول بإستخدام HTML 

مهارات تعلم تصميم المواقع
التاريخ Html Css Javascript PHP
الجمعة 50% 66% 88% 90%
الأثنين 99% 69% 98% 93%
الأربعاء 79% 65% 78% 99%
كود HTML المستخدم في الجدول التالي
<table border="1"width="800"> <caption>مهارات تعلم تصميم المواقع</caption>وصف الجدول <!-- align="center"ملغي --> <!-- width="800"عرض الجدول --> <!-- صف ---> <tr> <!-- المعومات --> <th>التاريخ</th> <th>Html</th> <th>Css</th> <th>Javascript</th> <th>PHP</th> </tr> <tr> <td>الجمعة</td> <td>50%</td> <td>66%</td> <td>88%</td> <td>90%</td> </tr> <tr> <td>الأثنين</td> <td>99%</td> <td>69%</td> <td>98%</td> <td>93%</td> </tr> <tr> <td>الأربعاء</td> <td>79%</td> <td>65%</td> <td>78%</td> <td>99%</td> </tr> </table>

الجدول الثاني بإستخدام HTML 


جدول ملون الباك راوند غامق
مهارات تعلم تصميم المواقع
التاريخ Html Css Javascript PHP
الجمعة 50% 66% 88% 90%
الأثنين 99% 69% 98% 93%
الأربعاء 79% 65% 78% 99%
الكود المستخدم
<!-- صفوف أساس الجدول --> <table border="1"width="800"> <caption>مهارات تعلم تصميم المواقع</caption>وصف الجدول <colgroup> <col span="2" style=background:#EEE </colgroup> <!-- align="center"ملغي --> <!-- width="800"عرض الجدول --> <!-- صف ---> <tr> <!-- المعومات --> <th>التاريخ</th> <th>Html</th> <th>Css</th> <th>Javascript</th> <th>PHP</th> </tr> <tr> <td>الجمعة</td> <td>50%</td> <td>66%</td> <td>88%</td> <td>90%</td> </tr> <tr> <td>الأثنين</td> <td>99%</td> <td>69%</td> <td>98%</td> <td>93%</td> </tr> <tr> <td>الأربعاء</td> <td>79%</td> <td>65%</td> <td>78%</td> <td>99%</td> </tr> </table>

الجدول الثالث بإستخدام HTML 

أسعار تعلم لغات البرمجة
التاريخ Html Css Javascript PHP
الجمعة 10$ 12$ 25$ 30$
أحد ,ثلاثاء 15$ 18$ 30$ 40$
الأثنين ,الأربعاء 15$ 18$ 30$ 40$
الكود المستخد
<table border="1"width="800"> <caption>أسعار تعلم لغات البرمجة</caption> <thaed> <tr> <td>التاريخ</td> <td>Html</td> <td>Css</td> <td>Javascript</td> <td>PHP</td> </tr> </thaed> <tr> <td>الجمعة</td> <td>10$</td> <td>12$</td> <td>25$</td> <td>30$</td> </tr> <tr> <td>أحد ,ثلاثاء</td> <td>15$</td> <td>18$</td> <td>30$</td> <td>40$</td> </tr> <tfoot> <tr> <td>الأثنين ,الأربعاء</td> <td>15$</td> <td>18$</td> <td>30$</td> <td>40$</td> </tr> </tfoot> </table> <!-- 3 --> <table>
يوجد الكثير من الخواص التي تم أزالتها و التي لم يعد التعامل بها في الوقت الحالي و تم أستبدالها بلغة Cssو أيضاً يللاحظ أن الجداول غير متجاوبة 100% مع مقاسات الشاشات المختلفة لانه لم بضاف وسم الميتا 
                <td colspan="2">برامج</td> دمج الخلايا 
               <!-- <td>برامج</td> -->حذفت لان دمج الخلايا أخذت 2 مكان داخل الجدول
               <!-- rowspan دمج خلايا عمودي-->
                <td colspan="3">ويب</td>
..........................................


reaction:

تعليقات