الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <!-- CSS هنا قمنا بتحسين تصميم كل شيء تم وضعه في الجدول بواسطة كود --> <style> td, th { border: 1px solid rgb(190, 190, 190); padding: 10px; } td { text-align: center; } tr:nth-child(even) { background-color: #eee; } th[scope="col"] { background-color: #696969; color: #fff; } th[scope="row"] { background-color: #d7d9f2; } table { border-collapse: collapse; border: 1px solid rgb(200, 200, 200); letter-spacing: 1px; font-family: sans-serif; font-size: .8rem; } </style> </head> <body> <table> <!-- هذه الخانات وضعناها كعنوانين في الجدول و أضفنا لها الخاصية حتى يتم تطبيق كود التصميم الموضوع كعنوان للأعمدة عليها scope="col" --> <tr> <th scope="col">Player</th> <th scope="col">Level</th> <th scope="col">Score</th> </tr> <!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها --> <tr> <th scope="row">Mhamad</th> <td>224</td> <td>50875135</td> </tr> <!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها --> <tr> <th scope="row">Bilal</th> <td>203</td> <td>46897655</td> </tr> <!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها --> <tr> <th scope="row">Sara</th> <td>198</td> <td>42159753</td> </tr> </table> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود