Tabel di HTML merupakan sesuatu yang sering kita jumpai saat browsing di sebuah website. Penggunaan tabel memang diperlukan untuk menyajikan suatu data yang dapat mudah dipahami informasinya oleh pembaca. Dengan menggunakan tabel informasi yang disajikan menjadi lebih terstruktur dan jelas. Kali ini saya akan membahasas lengkap tentang cara membuat tabel pada html.
Didalam pengembangan website, kita dapat membuat tabel dengan script tabel yang ada di HTML. Didalam postingan ini akan kita bahas bagaimana cara membuatnya. Sangat sederhana sebetulnya kode tabel di HTML diantaranya terdiri dari tag pembuka <table> dan tag penutup </table> , Didalam tag inilah yang nantinya akan kita buat tabel sesuai dengan keiinginan kita.
Daftar Isi
Struktur sederhana Tag Table
<table> // Membuat Baris dan kolom disini </table>Tabel terdiri dari cell baris dan kolom. Dapat kita lihat contoh gambar dibawah nomor 1 hingga 6 merupakan baris dan huruf A & B adalah kolom di dalam tabel tersebut.
Untuk membuat baris dan kolom dengan menggunakan script tabel di HTML kita menggunakan tag:
<tr> = Untuk menyatakan baris tabel <td> = Untuk menyatakan kolom tabel (digunakan untuk cell isi tabel) <th> = Untuk menyatakan kolom sebagai header tabel (default akan Bold judul kolom)Selain tag kolom dan baris diatas terdapat tag lain yang menjadi unsur penting dalam sebuah tabel yaitu
<thead> = Untuk meyatakan Header tabel <tbody> = Untuk menyatakan bagian body tabelCara membuat tabel pada HTML dengan sturktur sederhana
<!DOCTYPE html> <html> <body> <h2>Belajar Tabel</h2> <table> <tr> <th>No</th> <th>Nama</th> <th>Jurusan</th> </tr> <tr> <td>1</td> <td>Setiawan Dimas</td> <td>Teknik Informatika</td> </tr> <tr> <td>2</td> <td>Wahyu Widya</td> <td>Teknik Sipil</td> </tr> <tr> <td>3</td> <td>Erik Wasis</td> <td>Teknik Listrik</td> </tr> </table> </body> </html>Membuat Border Tabel di HTML
Untuk membuat border kita dapat menggunakan atribut border dengan nilai border yang kita inginkan. Penambahan border dapat ditambahkan dibagian atribut pada tag pembuka tabel yang ingin dibuat bordernya
<table border="1px">Selain cara diatas bisa juga ditambahkan di bagian <head> … </head> pada dokumen html yang dibuat.
Mengatur Jarak Tabel pada HTML dengan Atribut Cellspacing dan Cellpadding
1. Atribut Cellspacing
Atribut cellspacing digunakan untuk mengatur jarak spasi antar cell didalam tabel. Nilai dari atribut cellspacing menggunakan ukuran pixel (px).
2. Atribut Cellpadding
Atribut Cellpadding digunakan untuk mengatur jarak spasi antara dinding cell dengan isi cell itu sendiri. Atribut cellpadding juga menggunakan nilai dengan ukuran pixel (px).
Contoh Penggunaan:
<table border="1px" cellpadding="30px" cellspacing="15px">Menggabungkan Cell Tabel di HTML dengan Atribut Colspan dan Rowspan
1. Atribut Colspan
Atribut colspan didalam tabel HTML digunakan untuk menggabungkan dua atau lebih cell kolom pada tabel.
Contoh:
<!DOCTYPE html> <html> <body> <h2>Menggabungkan Kolom dengan Colspan</h2> <table border="1px"> <tr> <td>Baris 1 : Kolom 1</th> <td colspan="2">Baris 1 : Kolom 2</td> </tr> <tr> <td>Baris 2 : Kolom 1</th> <td>Baris 2 : Kolom 2</th> <td>Baris 2 : Kolom 3</th> </tr> <tr> <td>Baris 3 : Kolom 1</th> <td>Baris 3 : Kolom 2</th> <td>Baris 3 : Kolom 3</th> </tr> </table> </body> </html>Dapat dilihat dari kode tabel HTML diatas dimana kita membuat penggabungan kolom. Kolom yang digabungkan mulai dari kolom dua dan tiga. penggabungan cell kolom tersebut digabungkan pada baris pertama dengan menggunakan perintah colspan=”2″.
2. Atribut Rowspan
Atribut rowspan digunakan untuk menggabungkan dua atau lebih cell baris pada tabel.
Contoh:
<!DOCTYPE html> <html> <body> <h2>Menggabungkan Baris Tabel dengan Rowspan</h2> <table border="1px"> <tr> <td rowspan="4">Baris 1 : Kolom 1</th> </tr> <tr> <td>Baris 1 : Kolom 1</th> <td>Baris 1 : Kolom 2</th> <td>Baris 1 : Kolom 3</th> </tr> <tr> <td>Baris 2 : Kolom 1</th> <td>Baris 2 : Kolom 2</th> <td>Baris 2 : Kolom 3</th> </tr> <tr> <td>Baris 3 : Kolom 1</th> <td>Baris 3 : Kolom 2</th> <td>Baris 3 : Kolom 3</th> </tr> </table> </body> </html>Dapat kita lihat dari contoh kode tabel dengan menggunakan atribut rowspan diatas. pada baris kedua hingga ke empat kolom pertama digabungkan dengan menggunakan perintah rowspan=4. Sehingga dapat dilihat hasil output untuk script diatas menghasilkan output berikut:
Kesimpulan
Demikian pembahasan Kelas Programmer mengenai cara membuat tabel pada HTML. Anda bila ingin belajar lebih lagi dapat membaca artikel di blog ini yang lain. Komentar dibawah bisa digunakan bila ada pertanyaan terkait pembahasan diatas, Terimakasih.