Membuat Tabel dengan Menggunakan HTML

(1)

O l e h :

N u n i n g K u r n i a s i h , S . S o s . , M . H u m . N I P : 1 9 7 6 0 6 2 5 2 0 0 0 1 2 2 0 0 1 n u n i n g k u r n i a s i h @ y a h o o . c o m

Membuat Tabel

dengan HTML

Panduan Praktek : Web Design (3) Fakultas Ilmu Komunikasi

(2)

Membuat Tabel

Untuk membuat tabel, gunakan Tag HTML yang dimulai dengan tag

<TABLE> dan diakhiri dengan Tag </TABLE> dan diikuti dengan <TR>

dan TD>

-

Tag <TABLE> menerangkan bahwa itu adalah sebuah tabel.

-

<TR> singkatan dari Table Row, digunakan untuk membuat baris

dalam tabel.

-

<TD> singkatan dari Tabel Data, digunakan untuk meletakkan data

yang ingin kita isikan ke dalam tabel.

-

<TD> dapat diartikan sebagai kolom.

-

BORDER , digunakan untuk menentukan tebal garis pada tabel dengan

ukuran angka dimulai dari 1-n

(3)

Sintaks dalam Membuat Table

<TABLE atribut=“value”>

<TR>

<TD> atribut=value>. … ISI… </TD>

…..

</TR>

…..

….

(4)

Contoh Script

<HTML>

<HEAD>

<TITLE>Tabel Mata Kuliah</TITLE> </HEAD>

<BODY>

<TR>

(5)

Contoh Hasil Script

-

Setelah selsai menuliskan script, simpan script

dengan menggunakan .htm, contoh : tabel.htm

-

Kemudian buka browser dan akan terlihat hasilnya

(6)

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

(7)

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

(8)

Contoh Script Tabel

<title>Tabel Ruangan</title> </head>

<body>

<td bgcolor=“grey”>Ruangan Kuliah</td>

<td bgcolor=“green”>Kuliah di Gedung dua dan lima</td> </tr>

<tr>

<td bgcolor=“#00CCFF”>Kampus Jatinangor</td> <td bgcolor=“CCCCFF”>Fikom Unpad</td>

(9)

(10)

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

(11)

Contoh Script

<HTML>

<HEAD>

<TITLE>Daftar Mata Kuliah</TITLE> </HEAD>

<BODY>

<TD COLSPAN=“2”>Kolom yang digabungkan</TD> </TR>

<TR>

<TD>Kolom1, Baris2</TD>

<TD>Kolom2, Baris2</TD> </TR>

(12)

Contoh Hasil Merger Colom

(13)

Tugas

(14)