Menyajikan Pembuatan Tabel HTML

Tags

Menyajikan Pembuatan Tabel HTML

Tabel adalah cara untuk menampilkan sebuah informasi dalam bentuk sel yang terdiri dari baris dan kolom. Dalam hal ini untuk menampilkan data dalam bentuk table pada HTML web, adalah dengan menggunakan Tag <Table>. Elemen table ini berisi property <tr> untuk menentukan baris (table row) yang didalamnya ada properti <td> untuk menampilkan data pada setiap sel table (table data).

Menyajikan Pembuatan Tabel HTML

Simaklah, berikut ini adalah struktur elemen table:

Menyajikan Pembuatan Tabel HTML
Menyajikan Pembuatan Tabel HTML

Untuk mendifinisikan table heading ataupun judul pada setiap kolom maka perlu menggunakan tag <th> ….. </th>

Atribut Elemen Tabel

1)      Height = panjang (tinggi table, pixel atau persen)
2)      Width = panjang (lebar table, pixel atau persen)
3)      Border = pixel (tebal garis tepi)
4)      Cellpadding = pixel (spasi di dalam sel)
5)      Cellspacing = pixel (spasi antar sel)
6)      Bgcolor = warna (warna latar belakang table)
7)      Align = [left|center|right] (perataan table)

Atribut Table Row

1)      Align = [left|center|right] (perataan sebaris sel secara horizontal)
2)      Bgcolor = warna (warna latar belakang baris)
3)      Valign = [top|middle|bottom] (perataaan sebaris sel secara vertical)

Atribut Tabel Data

1)      Align = [left|center|right] (perataan horizontal)
2)      Height = pixel (tinggi sel, pixel atau persen)
3)      Width = [top|middle|bottom] (perataan vertical)
4)      Bgcolor = warna (warna latar belakang sel)

Menyajikan Tabel dengan Spaning

Terkadang ada kalanya kita ingin membuat table dengan menggabungkan baris maupun kolom. Lalu bagaimana cara membuatnya? Berikut ini adalah contoh tabel yang menggabungkan baris:

Menyajikan Pembuatan Tabel HTML

Sementara itu, ini adalah contoh tabel yang menggabungkan kolom:
 
Menyajikan Pembuatan Tabel HTML

Untuk dapat membuat table seperti halnya contoh di atas, maka Tabel Atribut Data yang dipakai ialah sebagai berikut:
1)      Colspan = angka (kolom yang di span oleh sel)
2)      Rowspan =angka(baris yang di span oleh sel)

Jadi untuk menggabungkan 4 baris seperti halnya contoh table di atas, maka yang perlu dilakukan adalah menggunakan kode tag berikut ini:
<td rowspan=4> …….</td>

Sementara untuk menggabungkan 4 kolom seperti contoh table di atas adalah dengan menggunakan kode:
<th colspan=4> …….</th>

Pembuatan Tabel dalam Tabel (Tabel Bersarang)

Coba perhatikanlah gambar contoh tabel berikut ini:

Menyajikan Pembuatan Tabel HTML

Bisa kita lihat bahwa pada kolom “Email account note” terdapat table yang berisi mengenai catatan jenis email. Jadi terdapat tabel didalam tabel atau istilah lainnya disebut “nested table” atau tabel bersarang. Di dalam penulisan HTML “tabel bersarang” ini adalah dengan cara menuliskan HTML Tabel didalam sebuah sel dari tabel, letaknya ialah pada tag <td>….</td>, seperti terlihat dalam contoh berikut ini:
 
Menyajikan Pembuatan Tabel HTML
Menyajikan Pembuatan Tabel HTML

Teknik tabel bersarang merupakan salah satu cara untuk menghasilkan layout tabel yang terlihat kompleks tanpa perlu membuat tabel yang sangat kompleks. Sehingga ketika kita harus membuat tabel yang sangat kompleks, maka cara sederhananya ialah dengan cara membuat tabel didalam sebuah sel tag (<td></td>). Berikut ini adalah contoh langkah demi langkahnya:
1)      Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya ialah sebagai berikut:

Menyajikan Pembuatan Tabel HTML
  
2)      Tentukanlah sel dimana kita ingin menempatkan tabel bersarang. Kali ini kita akan menaruh dikolom 2 baris ke 2.
3)      Ganti teks dalam sel tersebut dengan tabel kedua. Maka HTML akan terlihat seperti berikut ini:

Menyajikan Pembuatan Tabel HTML
Menyajikan Pembuatan Tabel HTML

Maka hasil akhirnya ialah sebagai berikut:
 
Menyajikan Pembuatan Tabel HTML

Salah satu trik untuk tabel bersarang ialah untuk selalu menutup tag tabel dalam sebelum menutup sel tabel luar.

Berkomentarlah sesuai dengan topik artikel
EmoticonEmoticon