HTMLالوسم <table>

تعريفه

نستخدم الوسم <table> لعرض جدول في الصفحة.

وسوم أساسية نضيفها في الجدول

بداخل الوسم <table> نستخدم الوسوم التالية بهدف تحديد طريقة بناؤه:

• <tr> لإضافة سطر فيه.
• <th> لإضافة حقل عبارة عن عنوان في السطر.
• <td> لإضافة حقل عادي في السطر.

وسوم إختيارية نضيفها في الجدول

بداخل الوسم <table> يمكن إضافة الوسوم التالية بهدف تحسين طريقة ظهوره:

• <caption> لإضافة وصف للجدول.
• <colgroup> لتقسيم أعمدة الجدول لمجموعات بهدف تعديل تصميمها.
• <thead> لتجميع الأسطر التي تحتوي العناوين بهدف تعديل تصميمها.
• <tbody> لتجميع الأسطر التي تحتوي المعلومات العادية بهدف تعديل تصميمها.
• <tfoot> لتجميع الأسطر التي نضعها في آخر الجدول بهدف تعديل تصميمها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <table>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

<table>
    
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Mark</th>
    </tr>
    
    <tr>
        <td>1</td>
        <td>Mhamad Harmush</td>
        <td>A</td>
    </tr>
    <!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
    <tr>
        <td>2</td>
        <td>Rima Houssayni</td>
        <td>C</td>
    </tr>
    <!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية -->
    <tr>
        <td>3</td>
        <td>Youssef Jabber</td>
        <td>B</td>
    </tr>
</table>

في المثال التالي قمنا بإضافة عنوان للجدول.

<table>
    
    <tr>Final semester marks</tr>
    ...
</table>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}