Seperti yang kita tahu tfoot dalam HTML menggunakan elemen yang dipanggil jadual untuk perwakilan data jadual. Ini terdiri daripada elemen seperti
Sintaks
Sintaks untuk mentakrif
<table> <thead> <tr>….</tr> </thead> <tbody> <tr>….</tr> <tr>….</tr> </tbody> <tfoot> <tr> <td>….</td> </tr> </tfoot> </table>
Daripada sintaks di atas, teks yang disertakan dalam teg
dianggap sebagai pengaki jadual.tag mungkin termasuk satu atau lebihselaraskan: Atribut ini membantu menjajarkan teks dengan merujuk kepada kandungannya.
valign: Atribut ini berguna untuk menjajarkan kandungan ke dalam penjajaran menegak teksnya.
char: Salah satu sifat penting berkenaan dengan
tag digunakan untuk menjajarkan teks dalam sel pengepala kepada aksara yang dihormati.Charoff: Ini adalah satu lagi atribut penting yang digunakan untuk menetapkan atribut aksara. Atribut jenis tersebut ditakrifkan dalam bentuk angka.
Kami boleh memutuskan kedudukan
teg dengan mentakrifkan nilai seperti penjajaran ke kiri, ke tengah sel, ke kanan sel, sisipkan atau justifikasi ruang tertentu0020di sekeliling kandungan teks, char untuk penjajaran kandungan teks dengan aksara khas dengan offset minimum, dsb.Teg ini boleh digunakan dengan sifat CSS yang berbeza adalah seperti berikut:
text-align: Sifat ini membantu menjajarkan teks pengaki sama ada di kiri, kanan, justify atau tengah secara langsung dengan bantuan kandungan teks.
bgcolor: Untuk menjadikan sel jadual lebih menarik, sifat ini membantu kami menetapkan warna sebagai latar belakang kepada sel lajur.
gaya fon: Seseorang boleh memberikan penggayaan pada teks, yang disertakan dalam
tag. Seseorang boleh menetapkan nilai kepada fon sebagai biasa, condong, awal, warisan, dll.saiz fon: Pengguna mungkin boleh menunjukkan teks dalam saiz yang berbeza kerana mereka mahu menggunakan sifat penggayaan ini.
berat fon: Seseorang boleh memutuskan sama ada teks mereka harus sama ada tebal atau condong.
transformasi teks: Sifat ini membantu untuk menunjukkan huruf besar teks atau mengawal huruf besar teks.
teks-hiasan: Jika kita ingin menghias teks yang disertakan dalam
tag supaya kami boleh menggunakan sifat ini untuk teks-garis hiasan, teks-gaya-hiasan, teks-warna-hiasan dll.bayang-teks: Sifat ini membantu anda menambahkan bayang-bayang pada teks.
ketinggian garisan: Ia akan membantu untuk menetapkan ketinggian kepada garisan yang diberikan.
jarak perkataan: Ia adalah salah satu sifat penting untuk memberi ruang khusus antara perkataan.
Mari kita lihat satu contoh bagaimana sebenarnya
tag akan berfungsi dalam HTML:Contoh:
<table> <thead> <tr> <th>Emp_ID<th> <th>Name<th> <th>Designation<th> </tr> </thead> <tbody> <tr> <td>111</td> <td>John</td> <td>Developer</td> </tr> <tr> <td>112</td> <td>Krishna</td> <td>Tester</td> </tr> <tr> <td>113</td> <td>Danish</td> <td>Project Manager</td> </tr> </tbody> <tfoot> <tr> <td>Total Employee</td> <td> 3 </td> </tr> </tfoot> </table>
Jadi dalam contoh di atas,
tag akan memaparkan jumlah kiraan pekerja daripada jadual.Contoh tfoot dalam HTML ditunjukkan di bawah:
Di sini ditunjukkan contoh Belanjawan-2020b menggunakan
tag:Kod:
<!DOCTYPE html> <html> <head> <style> thead { background-color:cadetblue; color: #fff; } tbody { background-color: lightcyan; } table { border-collapse: collapse; border: 2px solid rgb(180, 180,180); } td, th { border: 1px solid rgb(200, 200, 200); padding: 5px 5px; } td { text-align: left; } </style> </head> <body> <table> <thead> <tr> <th>Decreasing Prices</th> <th >Increasing Prices</th> </tr> </thead> <tbody> <tr> <td>SOYA PROTEIN</td> <td>CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS</td> </tr> <tr> <td >SOYA FIBRE</td> <td>AUTO PARTS</td> </tr> <tr> <td >ALCOHOLIC BEVERAGES</td> <td>FANS, TABLEWARE </td> </tr> <tr> <td >SKIMMED MILK </td> <td>KITCHENWARE PRICES TO </td> </tr> <tr> <td >FUSE, CHEMICALS, PLASTICS</td> <td>MEDICAL EQUIPMENT COSTLIER</td> </tr> <tr> <td >LIGHTWEIGHT-COATED PAPER </td> <td>FURNITURE </td> </tr> </tbody> <tfoot> <tr> <th>CHEAPER PRODUCTS</th> <th>EXPENSIVE PRODUCTS</th> </tr> </tfoot> </table> </body> </html>
Di sini ia ditakrifkan
tag sebaik sahaja selesai:Kod:
<!DOCTYPE html> <html> <head> <title>HTML tfoot Tag</title> <style> table{ border-collapse: collapse; } thead,tfoot{ background-color:darkgoldenrod; color:white; padding:5px; } tbody{ background-color:azure; padding:5px; } </style> </head> <body> <h4>tfoot in HTML</h4> <table border="1" > <thead> <tr> <th>Subject</th> <th>Marks</th> <th>Grades</th> </tr> </thead> <tfoot> <tr> <th>Total Marks</th> <th>647</th> <th>A+ </th> </tr> </tfoot> <tbody> <tr> <td>English</td> <td>90</td> <td>A+</td> </tr> <tr> <td>Math</td> <td>85</td> <td>A</td> </tr> <tr> <td>Science</td> <td>80</td> <td>A</td> </tr> <tr> <td>History</td> <td>75</td> <td>B</td> </tr> <tr> <td>Social Science</td> <td>75</td> <td>B</td> </tr> <tr> <td>History</td> <td>72</td> <td>B</td> </tr> <tr> <td>Geography</td> <td>95</td> <td>A+</td> </tr> <tr> <td>Biology</td> <td>75</td> <td>B</td> </tr> </tbody> </table> </body> </html>
Output:
General Example on tfoot tag.
Code:
<!DOCTYPE html> <title>tfoot tag</title> <style> table, td, th { border: 1px solid black; padding: 3px; text-align: center; } table { background-color:lightgray; } </style> <table> <thead> <tr><th>Department</th><th>Number of People</th></tr> </thead> <tbody> <tr> <td>Principle</td> <td>1</td> </tr> <tr> <td>Supervisor</td> <td> 4 </td> </tr> <tr> <td>Teaching staff</td> <td>200</td> </tr> <tr> <td>Non-Teaching staff</td> <td>20</td> </tr> <tr> <td>Peon</td> <td>15</td> </tr> </tbody> <tfoot> <tr><th>Total People</th><th>236</th></tr> </tfoot></table></html>
Output:
From all the above information, we can say that
is one of the important tags in the table, which helps to display the table summary at the bottom of the table. It’s always necessary to put tag at ends, so it will help the browser to render the table footer correctly.Atas ialah kandungan terperinci tfoot dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!