تعلم انشاء جدول ب HTML و CSS بإحترافية انسخ السكربت الآن

المستعمر للمعلوميات •
0

في هذا الشرح سوف نتعلم طريقة انشاء جدول إحترافي باستعمال HTML و CSS كما سوف نشرح لك الكثير من الخاصيات التي سوف نستعملها في انشاء هذا الجدول كما اننا سنقدم لك نصائح وفي آخر المقال سوف نقوم بإنشاء جدول إحتراف متكامل فيه كل الخصائص .

    لنبدأ بشرح بعض خصائص إنشاء جدول

  • <table> - </table> : بين هؤلاء الوسمين يتم وضع جميع عناصر الجدول بما فيها العناصر التالية.
  • <caption></caption> : لوضع عنوان الجدول .
  • <tr></tr> : هذا يدل على العنصر الأفقي للجدول بمعنى السطر الأول من الجدول.
  • <td></td> : يتم وضع هذا العنصر داخل الوسم <tr></tr> بالعدد الذي تريد من المربعات بمعنى يمكنك وضع القدر الذي تريد.
  • <th></th> : كذلك يتم وضع هذا العنصر داخل الوسمين <tr></tr> وهذا العنصر يمثل بديل ل <td></td> حيث يمثل انه شكل مميز عنه يمكنك غالبا يوضع في السطر الأول للجدول .

اما بالنسبة ل CSS فإنه لا بد من وضع خاصية border:solid 1px للعنصر <th> و <td> بالقيمة التي تناسبك ثم في الأخير لا بد من ان تضع خاصية border-collapse: collapse للعنصر <table> و التي تقوم بدمج border حدود كل من العناصر td , th مع بعضها لكي يكتمل مظهر الجدول.

لاحظ الصورة لكي تفهم جيدا الشرح الذي فوق

والآن سوف نطبق الشرح في جدول احترافي

HTML
<table>
    <caption>مواصفات واسعار الهواتف</caption>
    <tr>
        <th>اسم الجهاز</th>
        <th>مواصفاته</th>
        <th>ثمنه</th>
    </tr>
    <tr>
        <td>Nokia 2.4</td>
        <td>2G Ram مع تخزين 32G</td>
        <td>1150 درهم</td>
    </tr>
    <tr>
        <td>Redmi 9</td>
        <td>4G Ram مع تخزين 64G</td>
        <td>1599 درهم</td>
    </tr>
    
</table>
CSS
table {
    border-collapse: collapse;
    width: 500px;
    direction: rtl;
}
th , td{
border:solid 1px #000;
padding: 3px 10px;
text-align: center;
}
th{
    background-color: #006000;
    color: #fff;
}

مواصفات واسعار الهواتف
اسم الجهاز مواصفاته ثمنه
Nokia 2.4 2G Ram مع تخزين 32G 1150 درهم
Redmi 9 4G Ram مع تخزين 64G 1599 درهم
ان كان عندك اي تساؤل ضع لنا تعليق وسوف نجيبك في اسرع وقت ان شاء الله
Tags:

إرسال تعليق

أحدث أقدم