الدرس (16) تعلم html : الجداول ( الجزء الثاني )

بسم الله الرحمن الرحيم

تعلمنا في الدرس السابق الأساسيات في بناء الجداول بلغة html لكن يوجد بعض الأضافات في بناء الجداول سنتعرف على بعضها في هذا الدرس

الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي (thead) و الصفوف التي تقع في المنتصف او ما تسمى جسم الجدول (tbody) و اخر شيء الجزء السفلي (tfoot)

هذه التقسيمات تفيدنا عند تنسيق شكل الجدول عن طريق لغة css وهذه اللغة ان شاء الله سأضع دروس لها على هذا الموقع بعد الأنتهاء من دروس html

بداية نتعرف اين سنضع thead

نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي

<thead></thead>

لكن كيف نضعه في الجدول , نضعه بأن يكون الصف الأول من الجدول داخل هذين الوسمين على الشكل التالي

<thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead>

ويمكن تنسيق هذا الصف بلغة css عن طريق كتابة اكواد css ونضع التوجيه لهذا ال الصف على الشكل التالي

<style type="text/css">
thead td{background:#ccc; }
</style>

فتكون النتيجة على الشكل التالي

مع العلم انا قد وضعت حدود لجدول هذا و ضبطت عرضه

و أكواد ال css ال style وضعتها في الجزء head من الصفحة

الأكواد التي استعملتها في بناء هذا الجدول هي

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> </table> </body> </html>

نأتي الآن إلى جسم الجدول وهي الصفوف التي تقع ما بين أول صف و أخر صف
والوسوم الذي نحتاجه هو

<tbody></tbody>

نضع ما بين هذين الوسمين الصفوف المختارة من الجدول والتي تكون ما بين الصف الأول و الأخير مثل الشكل التالي

ويمكن تنسيق هذه الصفوف مثل هذا الشكل

<style type="text/css">
tbody td{background:#e0e0e0}

</style>

لتكون النتيجة على الشكل التالي

ويمكنك دمج المثال السابق مع هذا المثال ليكون الشكل على التالي

الأكواد التي أستعملتها ليصبح الشكل كالصورة السابقة

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> </table> </body> </html>

الآن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي

<tfoot></tfoot>

نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة css كما نسقنا جسم الجدول و رأس الجدول
مثلاً لقد اعددت جدول مؤلف من أجزائه كلها و الأكواد هي

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} tfoot td{background:#848080;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> <tfoot> <tr> <td>text 17</td> <td>text 18</td> <td>text 19</td> <td>text 20</td> </tr> </tfoot> </table> </body> </html>

ليصبح الجدول على الشكل التالي