Membikin Tabel di Html

Hallo coders, kali ini kita akan belajar Membikin tabel di Html. Tabel ini Krusial lo gaess, kegunaanya buat menampilkan atau menyajikan data dalam bentuk tabel biasanya diimplementasikan di dashboard admin. Merukapan dashboard Demi mengedit konten website. Tabel terdiri dari kolom dan baris.

Tag Demi Membikin Tabel di HTML

Seperti yang kita ketahui html terdiri dari sebuah tag. Sama juga dengan tabel, Demi Membikin tabel kita membutuhkan beberapa tag yang nantinya akan disusun atau dikombinasikan.

Berikut adalah beberapa tag tabel nya :

• Tag
  Demi membungkus tabelnya
  Tag
  Demi membungkus bagian kepala tabel
  Tag
  
  Demi membungkus bagian badan tabel
  Tag
  
  Demi membungkus bagian kaki tabel
  Tag
  
  (tabel row) Demi Membikin baris
  Tag

  (tabel data) Demi Membikin sel atau coloumn tag

  (tabel head) sama seperti td bedanya th Demi judul tabel Tag diatas yang paling Krusial dan sering digunakan adalah tag table tr dan td, yang lainnya opsional gaes. Nanti bakal kita praktekan perbedaanya dan kegunaan dari masing masing tag. Berikut ini adalah Misalnya tabel menggunakan tag table tr dan td. No Nama Jenis Harga Satuan Jumlah Total 1 Beras Rp. 35.000 Kg 2 Rp. 250.000 2 Daging Ayam Rp. 50.000 Potong 5 Rp. 250.000 3 Teh Botol Rp. 5.000 Biji 2 Rp. 10.000 Maka hasilnya seperti ini. Niscaya kalian bertanya tanya kenapa tabel tapi gak Terdapat garisnya ?. Itu dikarenakan didalam tag table Terdapat atribut atribut Spesifik juga. kalian Dapat mendambahkan atribut border seperti ini. maka Sebaiknya sudah Terdapat bordernya. nilai bordernya menentukan ketebalan baris. Atribut Cellpadding Demi Mengatur Jarak Selain atribut border Terdapat atribut cellpadding atribut ini digunakan Demi mengatur jarak antara text dengan garis didalam sel. Misalnya penggunaanya seperti ini. No Nama Jenis Harga Satuan Jumlah Total 1 Beras Rp. 35.000 Kg 2 Rp. 250.000 2 Daging Ayam Rp. 50.000 Potong 5 Rp. 250.000 3 Teh Botol Rp. 5.000 Biji 2 Rp. 10.000 10 adalah ukuran jaraknya. Kalau kalian copas kode diatas maka hasilnya akan menjadi seperti ini. Atribut Cellspacing tag Table Setelah kita belajar cellpadding Demi mengatur jarak antara text dengan garis didalam sel. Selanjutnya Terdapat atribut Spesifik Tengah Demi mengatur jarak antara garis tepi bagian dalam dan luar border. Dapat dibilang Demi mengatur ketebalan garis border di table kita. Kalian Dapat menambahkannya di samping tag cellpadding seperti ini. No Nama Jenis Harga Satuan Jumlah Total 1 Beras Rp. 35.000 Kg 2 Rp. 250.000 2 Daging Ayam Rp. 50.000 Potong 5 Rp. 250.000 3 Teh Botol Rp. 5.000 Biji 2 Rp. 10.000 Karena saya memberikan nilai 0 maka tabel nya akan menjadi Bukan Terdapat jaraknya seperti ini. Menggabungkan Baris dan Kolom di Tabel Kita Paham bahwa ketika kita Membikin tabel waktu belajar statistik Terdapat tabel yang digabungkan biasanya Demi total dan juga jumlah keseluruhan. Digabung ini tujuanya agar menjadi lebih rapi ketika dilihat. Nah di html kita Dapat melakukan itu menggunakan atribut Spesifik Demi tag td atau th Merukapan rowspan dan colspan. Rowspan Demi menggabungkan baris Colspan Demi menggabungkan kolom Disini saya akan melanjutkan kodingan yang tadi gaes. Kita akan menampilkan total keseluruhan harga. No Nama Jenis Harga Satuan Jumlah Total 1 Beras Rp. 35.000 Kg 2 Rp. 250.000 2 Daging Ayam Rp. 50.000 Potong 5 Rp. 250.000 3 Teh Botol Rp. 5.000 Biji 2 Rp. 10.000 Total Keseluruhan Rp. 330.000 Disini ya meletakan colspan 5 karena saya Ingin menggabungkan 5 kolom kenapa gak enam ?, karena yang satunya kita akan berikan total keseluruhannya. Bagaimana dengan rowspan ?, Metode penggunaanya kurang lebih sama gaes. Oke karena kurang Sesuai aja kalo diterapin di tabel produk. Disini saya akan Membikin studi kasus baru Merukapan tabel absensi. Kodingannya seperti ini. No NIM Nama Absensi Hadir Sakit Izin 1 071401001 Ridayanti 20 0 0 2 071401001 Fika Amalia 18 1 1 Maka hasilnya akan menjadi seperti ini. Ferry Coder Seorang full stack web developer dan mahasiswa informatika di Sleman, Yogyakarta. Ketika ini sedang menempuh studi di Universitas Amikom Yogyakarta jurusan informatika, konsentrasi pemrograman. Dalam dunia coding, saya Pusat perhatian pada Web Development. Lumrah bekerja menggunakan framework laravel(PHP) dan bootstrap, tetapi juga terbuka dengan teknologi lainya Kalau diperlukan. Suka bekerja sama, saling berbagi dan terbuka Demi saling berdiskusi. You may also like…