Apa Kegunaan Grup Table-Header dan Grup Table-Footer di CSS

Apa Kegunaan Grup Table Header Dan Grup Table Footer Di Css



Header dan Footer tabel adalah blok teks yang masing-masing ditempatkan di awal dan akhir tabel. Mereka digunakan untuk memberikan lebih banyak informasi mengenai tabel dan dapat membantu menentukan nilai yang terkandung dalam tabel tertentu. Elemen Table Header diwakili oleh “ ” sedangkan Footer Tabel diwakili oleh “ ” tag.

Apa itu Grup Tabel-Header?

Di CSS, ' Grup Tabel-Header ” digunakan untuk menampilkan tajuk tabel melalui tombol “ ” tag. Header sesuai dengan entri pertama di kolom vertikal. Ini menentukan informasi tentang entri tabel. Header juga dapat menjangkau beberapa kolom jika diperlukan. Ini dapat dilakukan dengan membuat Grup Tabel-Kolom di CSS.

Contoh
Header tabel memiliki pemformatan yang berbeda dari entri lainnya dalam tabel untuk membedakannya secara visual. Ini biasanya diwakili oleh ukuran font tebal atau teks skala atas. Saat mencantumkan nama 'Pria' dan 'Wanita', kami dapat menetapkannya sebagai Header di baris terpisah seperti yang ditunjukkan pada contoh di bawah ini:







< meja >
< kepala >
< tr >
< th > Pria < / th >
< th > Wanita < / th >
< / tr >
< / kepala >
< tubuh >
< tr >
< td > Yakobus < / td >
< td > Jessica < / td >
< / tr >
< tr >
< td > Daud < / td >
< td > Laura < / td >
< / tr >
< tr >
< td > Yakub < / td >
< td > Rebecca < / td >
< / tr >
< / tubuh >
< / meja >

Langkah-langkah berikut menjelaskan cara membuat Table-Header:



  • Tambahkan ' ” untuk membuat tabel.
  • Pada langkah selanjutnya, tentukan “ ” yang mengacu pada tajuk tabel.
  • Tambahkan nilai header sebagai baris melalui tag “” dan tutup header melalui tag “”.
  • Sekarang, sertakan ' ” untuk memulai isi tabel.
  • Masukkan data untuk setiap baris menggunakan tag “”.
  • Simpulkan badan tabel dan tabel melalui “ ' Dan ' ”, masing-masing.

Keluaran



Apa itu Grup Table-Footer?

Grup Kaki-Tabel ” digunakan untuk menampilkan footer tabel di CSS dengan bantuan tombol “ ” tag. Footer juga memberikan informasi tentang isi tabel yang dapat membantu pembaca dalam memahami data dengan lebih jelas. Menggunakan contoh yang sama dari bagian sebelumnya, tambahkan footer yang memberikan jumlah entri di setiap kolom untuk “Pria” dan “Wanita” dalam tabel.





Contoh
Gambaran umum contoh berikut menjelaskan konsep yang dibahas:

< meja >
< kepala >
< tr >
< th >Pria< / th >
< th >Wanita< / th >
< / tr >
< / kepala >
< tubuh >
< tr >
< td >Yakobus< / td >
< td >Jessica< / td >
< / tr >
< tr >
< td >David< / td >
< td >Laura< / td >
< / tr >
< tr >
< td >Yakub< / td >
< td >Rebecca< / td >
< / tr >
< / tubuh >
< tfoot >
< tr >
< td kelas = 'bg-abu-abu-200' >Jumlah 03< / td >
< td kelas = 'bg-abu-abu-200' >Jumlah 03< / td >
< / tr >
< / tfoot >
< / meja >

Langkah-langkah berikut menjelaskan langkah-langkah untuk membuat Table-Footer:



  • Mirip dengan contoh sebelumnya, tambahkan “ ” untuk membuat/menyertakan tabel.
  • Sertakan “ ” untuk menentukan tajuk tabel.
  • Sekarang, sama halnya, tambahkan judul tajuk sebagai baris dan tutup tajuk melalui ' ” tag.
  • Ingat kembali pendekatan yang dibahas untuk menentukan isi tabel dan menyertakan data di dalamnya.
  • Sekarang, tambahkan ' ” untuk memulai Footer Tabel.
  • Tambahkan data untuk Table Footer sebagai baris dan tutup footer menggunakan “ ” tag.
  • Terakhir, simpulkan tabel menggunakan “ ” tag.

Keluaran
Kode yang ditulis di atas menghasilkan hasil sebagai berikut:

Kesimpulan

Header dan Footer dalam Tabel di CSS membantu menambahkan lebih banyak informasi masing-masing di bagian atas dan bawah tabel. Informasi ini membantu untuk menentukan tentang apa tabel itu dan memberikan lebih banyak detail yang terkandung dalam nilai-nilai yang disisipkan dalam tabel. Bersama-sama, keduanya dengan sempurna membingkai data yang dikemas dalam tabel.