تعلم تصميم الجداول بلغة HTML+CSS بواسطة موقع صمم اي جدول ترغب فيه

كود جدول هتمل

نموذج لجدول بيانات بواسطة لغة HTML زايد تنسيق CSS صممته في الموقع بكل سهوله
الموقع صراحه رهيب في تصميم الجدوال اسهل من الوورد وفي لغة html + css في نفس الصفحة
معليك غير الذهاب الى الموقع من هنا وصمم اي جدول واختارالاعمدة والصفوف والالوان الذي تتناسب مع صفحة موقعك او مدونتك و بلغة html مع التنسيق css

الشكل التالي

% الخصم	الثمن	العدد	الاسم
5	200$	5	جهاز كميوتر
2	100$	5	هاتف نقال
0	4$	120	كتاب تعليم البرمجة

هذا كود المثال السابق

<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;border-color:#aaa;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:11px 11px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:11px 11px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;} .tg .tg-7a16{background-color:#fffc9e;text-align:center} .tg .tg-k00s{background-color:#9b9b9b;text-align:center} .tg .tg-ci37{background-color:#ecf4ff;text-align:center} </style> <table class="tg"> <tr> <th class="tg-k00s">&nbsp;% الخصم</th> <th class="tg-k00s">الثمن</th> <th class="tg-k00s">العدد</th> <th class="tg-k00s">الاسم</th> </tr> <tr> <td class="tg-ci37">5</td> <td class="tg-7a16">200$</td> <td class="tg-ci37">5</td> <td class="tg-7a16">جهاز كميوتر</td> </tr> <tr> <td class="tg-ci37">2</td> <td class="tg-7a16">100$</td> <td class="tg-ci37">5</td> <td class="tg-7a16">هاتف نقال</td> </tr> <tr> <td class="tg-ci37">0</td> <td class="tg-7a16">4$</td> <td class="tg-ci37">120</td> <td class="tg-7a16">كتاب تعليم البرمجة</td> </tr> </table>