47- كورس HTML للمبتدئين – إنشاء صفحة تعرض جدول أسعار أو خدمات بواسطة HTML

إنشاء صفحة تعرض جدول أسعار أو خدمات بواسطة HTML

إنشاء صفحة تعرض جدول أسعار أو خدمات بواسطة HTML

مقدمة

تعد جداول الأسعار والخدمات من العناصر الأساسية في أي موقع إلكتروني، حيث توفر للزوار معلومات منظمة وسهلة الفهم حول ما تقدمه الشركة أو الموقع. باستخدام HTML، يمكن إنشاء جداول توضح الأسعار والخدمات بشكل جذاب ومنظم، مما يساهم في تحسين تجربة المستخدم وزيادة التفاعل.

كيفية إنشاء جدول باستخدام HTML

لإنشاء جدول يعرض الأسعار أو الخدمات باستخدام HTML، يجب عليك استخدام العلامات الخاصة بالجداول مثل <table> و <tr> و <td>. كل عنصر من هذه العناصر يلعب دورًا محددًا في تنظيم البيانات داخل الجدول. إليك مثال بسيط على كيفية استخدام هذه العلامات لإنشاء جدول:

مثال:
<table border=\"1\">
        <tr>
            <th>الخدمة</th>
            <th>السعر</th>
        </tr>
        <tr>
            <td>تصميم موقع</td>
            <td>$500</td>
        </tr>
        <tr>
            <td>تحسين SEO</td>
            <td>$300</td>
        </tr>
    </table>

تنسيق الجداول باستخدام CSS

لإضفاء مظهر جذاب على الجداول، يمكن استخدام CSS لتنسيق الجدول. يمكن تغيير لون الحدود، والخلفية، ونمط النصوص لجعل الجدول أكثر جاذبية واحترافية. يمكنك استخدام خاصية CSS مثل border و background-color لتخصيص مظهر الجدول:

مثال:
table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }

خاتمة

تعتبر جداول الأسعار والخدمات وسيلة فعالة لتقديم المعلومات بشكل منظم وواضح على موقعك الإلكتروني. باستخدام HTML وCSS، يمكنك إنشاء جداول جذابة واحترافية تعزز من تجربة المستخدم. قم بتجربة الأمثلة المقدمة واستكشاف المزيد من الإمكانيات لتخصيص جداولك حسب احتياجاتك.