سربرگ جدول (thead)
سربرگ جدول (Table Head) با تگ thead ردیف عنوان ها را گروه بندی می کند. این کار مرتب سازی و چاپ را آسان می کند. مثل ردیف عنوان کارنامه مدرسه.
تعریف سربرگ جدول (thead)
تگ thead کنار tbody و tfoot بخش های جدول را جدا می کند. مرورگر می تواند بدنه را اسکرول دهد و سربرگ ثابت بماند. همچنین چاپ صفحات طولانی بهتر می شود.
مثال 1: جدول با thead، tbody و tfoot
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
مثال 2: استایل دهی thead، tbody، tfoot با CSS
<html>
<head>
<style>
thead {\n color: green;\n
}\n
tbody {\n color: blue;\n
}\n
tfoot {\n color: red;\n
}\n
table, th, td {\n border: 1px solid black;\n
}\n
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
مثال 3: چیدن افقی متن در thead
<table style="width:100%">
<thead style="text-align:left">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
مثال 4: چیدن عمودی متن در thead
<table style="width:50%;">
<thead style="vertical-align:bottom">
<tr style="height:100px">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
تمرین گام به گام
- یک ردیف عنوان با thead و th بساز.
- داده ها را داخل tbody قرار بده.
- جمع ها را در tfoot نمایش بده.
نکته: برای عنوان ستون از th استفاده کن. جداسازی بدنه با tbody و پاورقی با tfoot انجام می شود.
جمع بندی سریع
- thead ردیف های عنوان را گروه بندی می کند.
- چاپ و اسکرول را بهبود می دهد.
- همراه tbody و tfoot استفاده می شود.
- استایل ها با CSS قابل تنظیم است.