tfoot dalam HTML

Seperti yang kita tahu tfoot dalam HTML menggunakan elemen yang dipanggil jadual untuk perwakilan data jadual. Ini terdiri daripada elemen seperti , , dll. Antaranya ialah salah satu elemen penting dalam jadual untuk memaparkan bahagian ringkasan lajur jadual.

tag mesti diletakkan selepas , , tag dalam jadual. Seseorang boleh menunjukkan teg ini sama ada sebelum atau selepas atau elemen. Apabila terdapat berbilang halaman tersedia dalam jadual, elemen ini membantu pengguna meletakkan pengaki jadual di bahagian bawah halaman dan menatal kandungan jadual secara berasingan.

Sintaks

Sintaks untuk mentakrif tag adalah seperti berikut:

<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 lebih elemen.

tag menyokong atribut yang berbeza, mari lihat satu persatu:

selaraskan: 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.

Bagaimana HTML berfungsi pada tfoot?

elemen digunakan dengan gabungan dan yang akan mentakrifkan setiap elemen jadual seperti pengepala, pengaki dan badan. Teg ini akan menggunakan satu atau lebih elemen dalam elemen, jadi ia akan membantu untuk memaparkan ringkasan kandungan jadual. Ia harus diletakkan di bahagian bawah meja. Kerja utama tag adalah untuk mengekalkan data jadual yang besar. Ini akan membolehkan pengguna memaparkan kandungan jadual secara bebas supaya pengguna dapat merasai pengalaman yang lebih baik dalam kebolehgunaan.

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

Contoh tfoot dalam HTML ditunjukkan di bawah:

Contoh #1

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>

Output:

Contoh #2

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:

Example #3

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:

Conclusion

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!