Membuat Tabel dengan Menggunakan HTML
Membuat Tabel
dengan HTML
Panduan Praktek : Web Design (3)
Fakultas Ilmu Komunikasi
Universitas Padjadjaran
Oleh :
Nuning Kurniasih, S.Sos., M.Hum.
NIP : 19760625 200012 2 001
nuningkurniasih@yahoo.com
Membuat Tabel
Untuk membuat tabel, gunakan Tag HTML yang dimulai dengan tag
dan diakhiri dengan Tag dan diikuti dengan
dan TD>
- Tag menerangkan bahwa itu adalah sebuah tabel.
- singkatan dari Table Row, digunakan untuk membuat baris
dalam tabel.
- singkatan dari Tabel Data, digunakan untuk meletakkan data
yang ingin kita isikan ke dalam tabel.
- dapat diartikan sebagai kolom.
- BORDER , digunakan untuk menentukan tebal garis pada tabel dengan
ukuran angka dimulai dari 1-n
Sintaks dalam Membuat Table
atribut=value>. … ISI…
…..
…..
….
Contoh Script
Tabel Mata Kuliah
Kolom 1
Kolom 2
Kolom 3
cel
cel
cel
Contoh Hasil Script
- Setelah selsai menuliskan script, simpan script
dengan menggunakan .htm, contoh : tabel.htm
- Kemudian buka browser dan akan terlihat hasilnya
seperti berikut ini :
Mengatur Tabel
Untuk mengatur tabel, gunakan atribut berikut ini :
ATRIBUT
KETERANGAN
align
Untuk meratakan tabel ke kiri (left), tengah (centre), kanan
(right), kiri kanan (justify).
border
Untuk mengatur ketebalan garis pembatas antar sel-sel
dalam kolom.
width
Untuk menentukan lebar tabel dengan nilai persen (%)
cellspacing
Untuk menyatakan jarak (spasi) antar sel satu dengan
lainnya, serta antar sel dangan batas tabel.
cellpading
Untuk menyatakan jarak (spasi) antara isi sel dengan batas
sel (boarde)
bgcolor
Menunjukkan warna background untuk semua cell pada
tabel
boardercolor
Untuk membuat warna pada garis/boarder
Atribut pada Tag
Atribut
Keterangan
align
Digunakan untuk meratakan tabel ke kiri, kanan, tengah atau
kiri-kanan.
valign
Digunakan untuk meratakan yabel yang bersifat horizontal
(alignment) dengan nilai top (atas halaman), centre (tengah
halaman), buttom (bawah) atau baseline (standar)
bgcolor
Menunjukkan warna background pada baris (row)
width
Digunakan untuk menentukan lebar tabel, dimulai 1% hingga
100%. Selain itu digunakan juga untuk menentukan Pixel (Px)
yang nilainya disesuaikan dengan resolusi monitor yang
digunakan.
Height
Digunakan untuk menentukan tinggi cell tabel.
Centre
Digunakan untuk meletakkan tabel di tengah.
Left
Digunakan untuk meletakkan tabel ke kiri
Right
Digunakan untuk meletakkan tabel ke kanan
Contoh Script Tabel
Tabel Ruangan
Ruangan Kuliah
Kuliah di Gedung dua dan lima
Kampus Jatinangor
Fikom Unpad
Contoh Tampilan Tabel
Menggabungkan Beberapa Kolom
Untuk menggabungkan beberapa kolom, gunakan
atribut :
ROSWAN, digunakan untuk menggabungkan antar
baris. Untuk menggabungkan 2 baris beri nilai 2.
COLSPAN, digunkan untuk menggabungkan kolom
dengan kolom. Untuk menggabungkan dua kolom beri
nilai 2.
Contoh Script
Daftar Mata Kuliah
Kolom yang digabungkan
Kolom1, Baris2
Kolom2, Baris2
Contoh Hasil Merger Colom
Script di atas mengahsilkan tampilan sebagai berikut :
Tugas
- Buatlah sebuah tabel yang berisi mata kuliah yang
Anda ikuti.
Terimakasih
dengan HTML
Panduan Praktek : Web Design (3)
Fakultas Ilmu Komunikasi
Universitas Padjadjaran
Oleh :
Nuning Kurniasih, S.Sos., M.Hum.
NIP : 19760625 200012 2 001
nuningkurniasih@yahoo.com
Membuat Tabel
Untuk membuat tabel, gunakan Tag HTML yang dimulai dengan tag
dan diakhiri dengan Tag dan diikuti dengan
dan TD>
- Tag menerangkan bahwa itu adalah sebuah tabel.
- singkatan dari Table Row, digunakan untuk membuat baris
dalam tabel.
- singkatan dari Tabel Data, digunakan untuk meletakkan data
yang ingin kita isikan ke dalam tabel.
- dapat diartikan sebagai kolom.
- BORDER , digunakan untuk menentukan tebal garis pada tabel dengan
ukuran angka dimulai dari 1-n
Sintaks dalam Membuat Table
atribut=value>. … ISI…
…..
…..
….
Contoh Script
Tabel Mata Kuliah
Kolom 1
Kolom 2
Kolom 3
cel
cel
cel
Contoh Hasil Script
- Setelah selsai menuliskan script, simpan script
dengan menggunakan .htm, contoh : tabel.htm
- Kemudian buka browser dan akan terlihat hasilnya
seperti berikut ini :
Mengatur Tabel
Untuk mengatur tabel, gunakan atribut berikut ini :
ATRIBUT
KETERANGAN
align
Untuk meratakan tabel ke kiri (left), tengah (centre), kanan
(right), kiri kanan (justify).
border
Untuk mengatur ketebalan garis pembatas antar sel-sel
dalam kolom.
width
Untuk menentukan lebar tabel dengan nilai persen (%)
cellspacing
Untuk menyatakan jarak (spasi) antar sel satu dengan
lainnya, serta antar sel dangan batas tabel.
cellpading
Untuk menyatakan jarak (spasi) antara isi sel dengan batas
sel (boarde)
bgcolor
Menunjukkan warna background untuk semua cell pada
tabel
boardercolor
Untuk membuat warna pada garis/boarder
Atribut pada Tag
Atribut
Keterangan
align
Digunakan untuk meratakan tabel ke kiri, kanan, tengah atau
kiri-kanan.
valign
Digunakan untuk meratakan yabel yang bersifat horizontal
(alignment) dengan nilai top (atas halaman), centre (tengah
halaman), buttom (bawah) atau baseline (standar)
bgcolor
Menunjukkan warna background pada baris (row)
width
Digunakan untuk menentukan lebar tabel, dimulai 1% hingga
100%. Selain itu digunakan juga untuk menentukan Pixel (Px)
yang nilainya disesuaikan dengan resolusi monitor yang
digunakan.
Height
Digunakan untuk menentukan tinggi cell tabel.
Centre
Digunakan untuk meletakkan tabel di tengah.
Left
Digunakan untuk meletakkan tabel ke kiri
Right
Digunakan untuk meletakkan tabel ke kanan
Contoh Script Tabel
Tabel Ruangan
Ruangan Kuliah
Kuliah di Gedung dua dan lima
Kampus Jatinangor
Fikom Unpad
Contoh Tampilan Tabel
Menggabungkan Beberapa Kolom
Untuk menggabungkan beberapa kolom, gunakan
atribut :
ROSWAN, digunakan untuk menggabungkan antar
baris. Untuk menggabungkan 2 baris beri nilai 2.
COLSPAN, digunkan untuk menggabungkan kolom
dengan kolom. Untuk menggabungkan dua kolom beri
nilai 2.
Contoh Script
Daftar Mata Kuliah
Kolom yang digabungkan
Kolom1, Baris2
Kolom2, Baris2
Contoh Hasil Merger Colom
Script di atas mengahsilkan tampilan sebagai berikut :
Tugas
- Buatlah sebuah tabel yang berisi mata kuliah yang
Anda ikuti.
Terimakasih