تعلم جزء HTML 22: استخدام عناصر Thead و Tbody و Tfoot في جداول HTML
يمكن تقسيم الصفوف في الجدولفي جداول thead و tfoot وطاولات tbody معبرا عنها بعناصر thead و tfoot و tbody. يحتوي كل رأس و tfoot و tbody على مجموعة من الصفوف وتحتوي كل مجموعة على صف واحد على الأقل محدد بواسطة عنصر <tr>.
ستكون عناصر <thead> و <tfoot> و <tbody> شديدةمفيد في كتابة جدول طويل وواسع ويحتوي على أكثر من صفحة حيث تتم كتابة كل من الصفحات وجداول الرأس والقدم أيضًا. سيساعدك استخدام هذه العناصر الثلاثة في ترتيب الجدول كما يحلو لك باستخدام نمط CSS ولن يؤثر على تخطيط الجدول. لمزيد من التفاصيل ، دعنا نفكر في الشرح أدناه:
عنصر thead
يستخدم عنصر Thead لتجميع المحتوياتأو المحتوى الموجود في الجزء العلوي (الرأس) في الجدول. تتم كتابة علامة <thead> كعنصر فرعي لعنصر <table> مما يعني أنه موجود داخل عنصر <table> بعد عناصر <caption> و <colgroup> أو قبل <tfoot> و <tbody> و <tr>.
قيد الاستخدام ، يتم استخدام عنصر <thead> جنبًا إلى جنب مع عنصر <tbody> الذي يعرض محتويات الجدول و <tfoot> التي تُظهر الجزء السفلي (قدم) الجدول.
في HTML5 لا توجد سمات خاصةيمكن استخدامها لعناصر <thead> بينما في HTML4.01 هناك العديد من السمات وهي المحاذاة ، bgcolor ، char ، charoff ، و valign. ومع ذلك ، فإن هذه السمات قديمة ويجب عليك استخدام CSS فقط لتعيين عنصر <thead>.
عنصر Tbody
يتم استخدام عناصر الجسم للتجميعالمحتوى أو المحتوى الموجود في منتصف (نص) الجدول. يجب تضمين علامة <tbody> إلا إذا كان الجدول يحتوي على جدول نص واحد فقط ولا يحتوي على جدول رأس أو قدم.
قيد الاستخدام ، يتم استخدام عنصر <tbody> جنبًا إلى جنب مع عنصر <thead> الذي يعرض الجزء العلوي (رأس) الجدول و <tfoot> الذي يوضح الجزء السفلي (قدم) الجدول.
في HTML5 لا توجد سمات خاصةيمكن استخدامها لعناصر <tbody> بينما في HTML4.01 هناك العديد من السمات وهي المحاذاة ، bgcolor ، char ، charoff ، و valign. ومع ذلك ، فإن هذه السمات قديمة ويجب عليك استخدام CSS فقط لتعيين عنصر <tbody>.
عنصر تفوت
يستخدم عنصر tfoot لتجميع المحتوياتأو محتوى أسفل (قدم) جدول. قيد الاستخدام ، يتم استخدام عنصر <tfoot> جنبًا إلى جنب مع عنصر <tbody> الذي يعرض محتويات الجدول و <thead> الذي يعرض أعلى (رأس) الجدول. يتم تضمين علامة الفتح <tfoot> في حالة وجود جدول tfoot ويمكن تجاهل علامة الإغلاق <tfoot>.
في HTML5 لا توجد سمات خاصةيمكن استخدام عنصر <tfoot> بينما يوجد في HTML4.01 العديد من السمات وهي المحاذاة ، bgcolor ، char ، charoff ، و valign. ومع ذلك ، فإن هذه السمات قديمة ويجب عليك استخدام CSS فقط لتعيين عنصر <tbody>.
الشيء الذي يجب تذكره هو أنه يجب أن يحتوي العنوان على نفس عدد الأعمدة. فيما يلي مثال على التعليمات البرمجية لكتابة واستخدام هذه العناصر الثلاثة في HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Grup Baris di HTML</title>
<style type="text/css">
table,th, td {
border: 1px solid black;
border-collapse: collapse;
width: 20%; }
tfoot { border:3px solid red; }
</style>
</head>
<body>
<table>
<tfoot> <!-- Meskipun elemen tfoot diletakkan di paling depan, hasilnya di browser berada di paling bawah>
<tr>
<td>Rata-Rata</td>
<td>16</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>011402001</td>
<td>15</td>
</tr>
<tr>
<td>011402002</td>
<td>17</td>
</tr>
</tbody>
<thead>
<tr>
<th>NIM</th>
<th>Poin</th>
</tr>
</thead>
</table>
</body>
</html>النتائج في متصفح مثل هذا:
كما ترى من كود HTML أعلاه ،على الرغم من أنني وضعت عنصر tfoot في المقدمة (بعد علامة الفتح <table>) ، إلا أن النتائج ستكون في المستعرض في المستعرض لأن وظيفة هذا العنصر تجمع محتويات الخلايا أو المحتويات في أسفل الجدول. وبالمثل مع عنصر thead الذي يجمع محتويات الخلية في بداية (رأس) الجدول وعنصر الجسم في منتصف الجدول.
كيف؟ هل تفهم وظيفة هذه العناصر الثلاثة؟ إذا كنت قد فهمت بالفعل ، فيُرجى المتابعة إلى المادة التالية المتعلقة باستخدام علامات col و colgroup و caption.
