Dasar-dasar HTML 2. Oleh: Cecep Yusuf

Ukuran: px

Mulai penontonan dengan halaman:

Download "Dasar-dasar HTML 2. Oleh: Cecep Yusuf"

Hengki Cahyadi
7 tahun lalu
Tontonan:

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.

2 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 <table> 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 <thead> atau Table Header adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah kepala dari sebuah tabel dan terletak di bagian atas tabel. Tag <thead> membungkus kumpulan-kumpulan tag header, yaitu Tr dan Th. 3. TBODY, Tag <tbody> atau Table Body adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah isi dari tabel, antara header dan footer, badan dari sebuah tabel. Tag <tbody> membungkus cell-cell inti tabel, yaitu Tr dan Td. 4. TFOOT, Tag <tfoot> atau Table Footer adalah tag untuk mendeklarasikan/mendefinisikan bahwa tag tersebut adalah kaki dari sebuah tabel dan terletak di baris bagian bawah tabel. Tag <tfoot> 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 <th> atau Table Heading adalah tag yang berisi heading dari tabel, biasanya berupa nama field dari sebuah tabel. Tag ini diapit oleh tag. 7. TD, Tag <td> atau Table Data diapit oleh tag. Tag ini merupakan isi dari data tabel, tag ini disebut juga Cell jika kita terbiasa dengan MS Excel. Perbedaan <td> dengan <th> adalah bahwa <td> berisi data biasa, sedangkan <th> 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.

3 Untuk melihat struktur tabel seperti apa, kita dapat melihat contoh sebagai berikut: <table> <thead> <th>no</th> <th>produk</th> <th>jumlah</th> </thead> <tbody> <td>1</td> <td>laptop</td> <td>10</td> <td>2</td>

4 <td>handphone</td> <td>15</td> <td>3</td> <td>monitor</td> <td>20</td> </tbody> <tfoot> <td></td> <td>total</td> <td>45</td> </tfoot> </table> 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: 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:

5 OK, sekarang kita akan coba membuat sebuah tabel dengan menggunakan semua atribut yang disebutkan di atas.. Saya akan coba berikan contoh data statistik siswa..

6 Nah, kode di atas dibuat berdasarkan tag-tag yang sudah kita pelajari di atas.. berikut ini adalah kode untuk tabel tersebut: <table style="width: 100%;" border="1" cellspacing="0" cellpadding="5"> <thead> <tr class="first even"> <th rowspan="2" align="center" valign="middle">no</th> <th rowspan="2" align="center" valign="middle">kelas</th> <th colspan="2" align="center" valign="middle">jumlah Siswa</th> <th rowspan="2" align="center" valign="middle">sub Total</th> <th align="center" valign="middle">laki-laki</th> <th align="center" valign="middle">perempuan</th> </thead> <tbody> <td>1</td> <td>x 1</td> <td align="right">21</td> <td align="right">17</td> <td align="right">38</td> <td>2</td> <td>x 2</td> <td align="right">19</td> <td align="right">22</td> <td align="right">41</td> </tbody> <tfoot> <td colspan="4" align="right">total</td> <td align="right">79</td> </tfoot> </table> Bagaimana? mudah bukan? :)

7 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 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

dokumen-dokumen yang mirip

KOMPUTER APLIKASI IT (Information Technology)

KOMPUTER APLIKASI IT (Information Technology) 2 SKS Semester 1 S1 Sistem Informasi Nizar Rabbi Radliya nizar.radliya@yahoo.com Pertemuan 5 Universitas Komputer Indonesia 2014 Tabel pada HTML Tabel pada