Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Fakultas Ilmu
Komputer
Teknik Informatika
05
MK87039 Tim DosenPembahasan
Cara Membuat Tabel dengan Tag <table>,<tr>,<td>
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>, tag
<tr>, dan tag <td>:
Tag <tabel> digunakan untuk memulai tabel
Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML: Contoh penggunaan tag <tabel>:
2015
3
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Maka akan tampil hasil seperti gambar di bawah ini
Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel.
border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan
memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
Atribut cellpadding dalam tabel HTML
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi
text tabel itu sendiri.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding=”2″, maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam tabel dengan isi text tabel.
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:
2015
5
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Atribut cellspacing dalam tabel HTML
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian
dalam dan luar.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing=”2″, maka web browser akan menampilkan jarak sebesar 2 pixel diantara garis border tabel.
Hasil yang didapatkan seperti gambar di bawah ini
Fungsi Atribut Rowspan and Colspan
Atribut rowspan and colspan digunakan untuk membuat sel tabel ‘bersatu’ dengan sel
yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung saja kita buat contoh kode HTMLnya.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelspan.html Contoh penggunaan atribut rowspan and colspan:
2015
7
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Maka hasilnya seperti gambar di bawah ini
Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut
Fungsi Tag th
Sering kali dalam membuat tabel, baris pertama kita gunakan sebagai judul kolom dari baris-baris dibawahnya. Dan biasanya baris-baris pertama tabel ini secara visual dibedakan dengan baris dibawahnya agar tampak lebih menarik, misalnya diberi warna yang berbeda, atau font yang berbeda.
Untuk keperluan ini, HTML memiliki tag khusus yang bisa digunakan, yaitu tag th (singkatan dari table head) . Dalam penggunaan tag th, kita hanya perlu mengganti tag td dengan th pada baris pertama tabel.
Sebagai contoh cara penggunaan tag th, silahkan buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelth.html
Contoh penggunaan tag th:
2015
9
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Penggunaan atribut width pada tag col
Salah satu atribut yang bisa kita gunakan pada tag col adalah atribut width. Atribut ini digunakan untuk mengatur lebar dari masing-masing kolom dalam tabel.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelcolwidth.html Contoh penggunaan atribut width pada tag col :
Dengan hasil seperti pada gambar di bawah ini
Dari contoh kode HTML diatas, saya menggunakan atribut width untuk mengatur lebar dari kolom tabel. Misalnya untuk kolom pertama, atribut width=”75px” digunakan untuk membuat lebar kolom menjadi 75 pixel. Lebih lanjut tentang atribut width, akan saya bahas secara tersendiri pada tutorial selanjutnya.
Cara membuat garis antara baris dan kolom tabel (atribut rules)
Jika sebelumnya anda telah mempelajari pembahasan tentang atribut border untuk tabel, maka jika diperhatikan, web browser sebenarnya tidak hanya menampilkan border, namun juga garis pembatas di antara sel tersebut, seperti tampilan dibawah ini:
HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada tag
table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.
Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan atribut
rules=”cols” pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas hanya
diantara kolom. Sedangkan atribut rules=”rows” akan menampilkan garis pembatas hanya diantara baris. Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat menggunakan atribut rules=”all”. Sebaliknya jika tidak ingin menampilkan garis apapun diantara sel, bisa menggunakan atribut rules=”none”.
2015
11
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Contoh penggunaan atribut rules pada tag rules :
Hasil jika menggunakan rules=”rows”
Hasil jika menggunakan rules=”all”
2015
13
Pemrograman Web 1 Pusat Bahan Ajar dan eLearningTim Dosen http://www.mercubuana.ac.id
Cara Membuat <table> dengan CSS
Sebelum kita melanjutkan pembuatan menggunakan CSS, mari kita buat nama file
style.css, dan isikan code seperti di bawah ini (tambahkan dari css sebelumnya)
Daftar Pustaka
Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.
Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming. Yogyakarta: Andi Yogyakarta.
Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya untuk Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.
Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.