Dasar-dasar HTML 2. Oleh: Cecep Yusuf

Dasar-dasar HTML 2 Oleh: Cecep Yusuf

Pada tutorial ini, kita akan belajar bagaimana membuat sebuah tabel tag-tag HTML. Kita akan mempelajari bagaimana membuat tabel yang baik.

Melanjutkan tutorial Dasar-dasar HTML 1. Pada tutorial ini, kita akan belajar bagaimana membuat sebuah tabel dengan menggunakan tag-tag HTML. Kita akan mempelajari bagaimana membuat tabel yang baik, yang meliputi head, body, dan footer dari tabel. Tetapi, sebelumnya saya akan jelaskan dahulu istilah-istilah dari tag yang digunakan untuk membuat table. Berikut ini adalah penjelasan tag-tag yang digunakan untuk membuat tabel, yaitu: 1. TABLE, Tag adalah kumpulan beberapa cell (kotak) dari elemen-elemen di dalam tabel secara keseluruhan. Tag ini adalah tag utama yang membungkus kumpulan-kumpulan tag untuk membangun sebuah tabel, yaitu Thead, Tbody, Tfoot, Tr, Th, dan Td. 2. THEAD, Tag atau Table Header adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah kepala dari sebuah tabel dan terletak di bagian atas tabel. Tag membungkus kumpulan-kumpulan tag header, yaitu Tr dan Th. 3. TBODY, Tag atau Table Body adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah isi dari tabel, antara header dan footer, badan dari sebuah tabel. Tag membungkus cell-cell inti tabel, yaitu Tr dan Td. 4. TFOOT, Tag atau Table Footer adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah kaki dari sebuah tabel dan terletak di baris bagian bawah tabel. Tag membungkus kumpulan-kumpulan cell tabel, yaitu Tr dan Td (sama seperti body). 5. TR, Tag atau Table Row adalah tag untuk mendefinisikan setiap baris dari tabel. Di dalam TR terdapat TD. Tag di dalam html biasanya berupa pengulangan ke bawah, berfungsi untuk menampilkan data baris per barisnya. 6. TH, Tag . 7. TD, Tag . Tag ini merupakan isi dari data tabel, tag ini disebut juga Cell jika kita terbiasa dengan MS Excel. Perbedaan

atau Table Heading adalah tag yang berisi heading dari tabel, biasanya berupa nama field dari sebuah tabel. Tag ini diapit oleh tag
atau Table Data diapit oleh tag
dengan	adalah bahwa	berisi data biasa, sedangkan	berupa Cell untuk nama field/judul kolom. Struktur Tabel Untuk mengikuti aturan HTML yang baik, selalu letakkan thead di atas, tbody di tengah, dan tfoot di bawah. Untuk melihat struktur tabel seperti apa, kita dapat melihat contoh sebagai berikut: No Produk Jumlah 1 Laptop 10 2 Handphone 15 3 Monitor 20 Total 45 Hasil dari tabel di atas adalah seperti ini: No Produk Jumlah 1 Laptop 10 2 Handphone 15 3 Monitor 20 Total 45 Catatan: gambar tabel di atas sudah memakai CSS/style. Atribut Tabel Ada banyak atribut-atribut pada tabel. Tetapi, atribut-atribut table secara umum yang sering dimodifikasi yaitu: 1. 2. 3. 4. 5. 6. 7. 8. 9. Width, menentukan lebar tabel atau cell Height, menentukan tinggi cell Border, menentukan lebar garis pinggir cell Cellpadding, menentukan jarak antara konten cell dengan border (garis pinggir) Cellspacing, menentukan jarak antara border cell dengan border cell lain Align, menentukan horizontal alignment (perataan horizon) teks di dalam cell Valign, menentukan vertical alignment (perataan vertical) teks di dalam cell Colspan, menyatukan cell dengan cell di sebelah kanannya Rowspan, menyatukan cell dengan cell di bawahnya Untuk simulasinya, silakan lihat gambar berikut ini: OK, sekarang kita akan coba membuat sebuah tabel dengan menggunakan semua atribut yang disebutkan di atas.. Saya akan coba berikan contoh data statistik siswa.. Nah, kode di atas dibuat berdasarkan tag-tag yang sudah kita pelajari di atas.. berikut ini adalah kode untuk tabel tersebut: No Kelas Jumlah Siswa Sub Total Laki-laki Perempuan 1 X 1 21 17 38 2 X 2 19 22 41 Total 79 Bagaimana? mudah bukan? :) Untuk styling, sebenernya cara ini tidaklah efektif, nanti kita akan pelajari bagaimana penerapan styling untuk table menggunakan CSS. Walopun begitu, temen-temen juga harus memahami atribut2 dasar untuk tabel ini. Setelah itu, baru ke CSS... Jika ada yang kurang paham, silakan diskusikan di box komentar di bawah... hehehe.. ~ Jagocoding.com Stand by with Me, @cheyuz, Jagocoding, learn and share your code! Tentang Penulis Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com × Report "Dasar-dasar HTML 2. Oleh: Cecep Yusuf" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close