HTML <thead> 标籤
paliwanag at paggamit
<thead> tag ay ginagamit upang isagupin ang nilalaman ng titulo ng HTML table.
<thead> ang elemento kasama ang <tbody> at <tfoot> ang mga elemento na ito ay ginagamit nang magkasama upang tukuyin ang bawat bahagi ng talahanayan (header, laman, footer).
Ang mga browser ay maaaring gamitin ang mga elemento na ito upang ipakita ang header at footer nang mag-isa habang inililipat ang laman ng talahanayan. Gayundin, kapag inililipat ang malaking talahanayan na tumahak sa ilang pahina, ang mga elemento na ito ay maaaring ipakita ang header at footer sa itaas at ibaba ng bawat pahina.
paalam:<thead> ang elemento ay dapat magkaroon ng isa o higit pang <tr> tag.
<thead> ang tag na ito ay dapat gamitin sa mga sumusunod na konteksto: bilang <table> ang mga anak ng elemento, anumang <caption> at <colgroup> pagkatapos ng elemento, at anumang <tbody>,<tfoot> at <tr> bago ang elemento.
paalam:Sa kasalukuyang paraan:<thead>ang mga elemento na <thead>、<tbody> at <tfoot> ay hindi makaapektuhin ang paglalaot ng talahanayan. Subalit, maaari mong gamitin ang CSS upang itakda ang estilo ng mga elemento na ito (tingnan ang mga halimbawa sa ibaba)!
sampul
halimbawa 1
HTML table na naglalaman ng mga elemento na <thead>、<tbody> at <tfoot>:
<table>
<thead>
<tr>
<th>เดือน</th>
<th>เงินออม</th>
</tr>
</thead>
<tbody>
<tr>
<td>มกราคม</td>
<td>￥3400</td>
</tr>
<tr>
<td>กุมภาพันธ์</td>
<td>￥4500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ang kabuuan</td>
<td>￥7900</td>
</tr>
</tfoot>
</table>
halimbawa 2
Gumamit ng CSS upang itakda ang estilo ng <thead>、<tbody> at <tfoot>:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>เดือน</th>
<th>เงินออม</th>
</tr>
</thead>
<tbody>
<tr>
<td>มกราคม</td>
<td>￥3400</td>
</tr>
<tr>
<td>กุมภาพันธ์</td>
<td>￥4500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ang kabuuan</td>
<td>￥7900</td>
</tr>
</tfoot>
</table>
halimbawa 3
paano mag-irerektang <thead> ang nilalaman (gumamit ng CSS):
<table style="width:100%">
<thead style="text-align:left">
<tr>
<th>เดือน</th>
<th>เงินออม</th>
</tr>
</thead>
<tbody>
<tr>
<td>มกราคม</td>
<td>￥3400</td>
</tr>
<tr>
<td>กุมภาพันธ์</td>
<td>￥4500</td>
</tr>
</tbody>
</table>
halimbawa 4
paano mag-irerektang pababa <thead> ang nilalaman (gumamit ng CSS):
<table style="width:50%;">
<thead style="vertical-align:bottom">
<tr style="height:100px">
<th>เดือน</th>
<th>เงินออม</th>
</tr>
</thead>
<tbody>
<tr>
<td>มกราคม</td>
<td>￥3400</td>
</tr>
<tr>
<td>กุมภาพันธ์</td>
<td>￥4500</td>
</tr>
</tbody>
</table>
คุณสมบัติโลกะละกา
<thead> ตามตารางนี้ยังสนับสนุน คุณสมบัติโลกะละกาใน HTML。
คุณสมบัติกิจกรรม
<thead> ตามตารางนี้ยังสนับสนุน คุณสมบัติกิจกรรมใน HTML。
การตั้งค่า CSS โดยมาก
โดยมากเบราเซอร์จะแสดงค่าเริ่มต้นดังนี้ <thead> องค์ประกอบ：
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
การสนับสนุนเบราเซอร์
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
