Pertemuan 3. Tabel dalam HTML (1)

(1)

Tabel dalam HTML

Suci Rahma Dani Rachman, S.Kom., M.T

(2)

Materi Pembelajaran

1. Tabel dalam HTML 2. Tag-tag Tabel

CPMK:

Mahasiswa mampu membuat tampilan informasi dalam

betuk tabel mengiterasikan beberapa page dalam satu

web page

(3)

1. Tabel dalam HTML

a. Border tabel b. Header

c. Collspan dan Rowspan d. Empty Cell

e. Cellspanding dan cellspacing

f. Back ground

(4)

4

• Tabel digunakan untuk menyajikan data dalam betuk baris dan kolom.

• Elemen-Elemen Tabel:

Elemen Penjelasan

<table>…</table> Mendefinisikan sebuah tabel

<caption>…</caption> Medefinisikan Judul Tabel

<tr>…</tr> Mendefinisikan

sebuah Baris

(5)

By I Wayan Simpen 5

Elemen lanjutan

Elemen Penjelasan

<td>…</td> Medefinisikan sebuah Kolom

<th>…</th> Mendefinisikan Header Tabel

<col> Seting property kolom

<colgroup>…</colgroup> Seting property kolom secara berkelompok

<thead>…</thead>,

<tbody>…</tbody>,

Menentukan properti kelompok baris 

(6)

Atribut Tag <TABLE ….>

BORDER Biangkai Tabel

CELLPADDING Jarak antara sel dan isi sel CELLSPACING Spasi antara sel

WIDTH Lebar tabel

BGCOLOR Latar belakang dengan warna BACKGROUND Latar belakang dengan image ALIGN Perataan tabel

By I Wayan Simpen

6

(7)

Atribut Tag <TABLE ….> (Lanjutan)

HEIGHT

Tinggi table

FRAME

Sekeliling tabel ada atau tidak garis

RULES

Garis internal tabel

BORDERCOLOR

Warna bingkai

BORDERCOLORLIGHT

Warna bingkai bagian terang

BORDERCOLORDARK

Warna bingkai bagian gelap

7

(8)

Atribut Tabel tag <TR>

By I Wayan Simpen 8

Atribut Penjelasan

Align ={left | center |

right} Perataan teks secara

horizontal Halign={left | center |

right} Perataan horizontal

Valign={top | middle |

bottom} Perataan teks secara

vertikal

Width Lebar baris

Height Tinggi baris

Bgcolor=“kode_warna” Warna latar belakang

(9)

Atribut Tabel tag <TR> (Kont.)

By I Wayan Simpen 9

Atribut Penjelasan

Bordercolor=“Warna” Warna border sel dalam baris

Bordercolorlight=

“Warna”

Warna border untuk yang terang

Bordercolordark=

“Warna”

Warna border untuk warna gelap

Backgound=“image” Menggunakan gambar

sebagai latar belakang

(10)

Atribut Tabel tag <TD>

By I Wayan Simpen 10

Atribut Penjelasan

Align ={left | center |

right} Perataan teks secara

horizontal Valign={top | middle |

bottom} Perataan teks secara

vertikal

Colspan=n Menggabung n sel

kolom

Rowspan=n Menggabung n sel

baris

Nowrap Non-aktifkan wraping

teks dalam sel

(11)

Atribut Tabel tag <TD> (Lanjutan)

Atribut Penjelasan

Cellpading=“n” Mengatur jarak border dengan isi sel

Cellspacing=“n” Mengatur tebal frame dalan satuan pixel

Bgcolor=“

kode_warna

” Mengatur warna latar belakang sel pada tag Backgound=“image” Menggunakan gambar

sebagai latar belakang

(12)

Atribut Tabel tag <TD> (Lanjutan)

Atribut Penjelasan

Bordercolor=“Warna” Warna border sel dalam sel

Bordercolorlight=

“Warna”

Warna border untuk yang terang sel

Bordercolordark=

“Warna”

Warna border untuk warna gelap sel

Width=n Mengatur lebar

kolom/sel

(13)

a. Border Tabel

BGCOLOR

BORDERCOLORDARK

BORDERCOLORLIGHT

(14)

• Border adalah garis yang mengelilingi sebuah tabel.

• Contoh:

(15)

(16)

(17)

 Pembuatan tabel didahului oleh tag <table>

 attribute border=1 menyatakan pembuatan tabel dengan memiliki border. Karena secara default, sebuah table tidak memiliki border.

 Tag <tr> berfungsi sebagai pembuat baris

 Tag <th> bertujuan untuk membuat judul. Jika dalam satu baris <tr>

dibuat diinisialisasi <th> sebanyak 4, maka dalam satu baris akan terbuat 4 kolom dengan masing-masing memiliki judul.

 Tag <td> untuk mengisi data pada masing-masing baris. Jika dalam satu baris<td> dibuat 4 <td>, maka dalam satu baris akan terbuat 4 kolom(cell) dimana tiap cell akan diisi datanya seperti script diatas.

(18)

b. Header

 Sering kali dalam membuat tabel, baris pertama yang gunakan sebagai judul kolom dari baris-baris dibawahnya. Dan biasanya 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, hanya perlu

mengganti tag td dengan th pada baris pertama

tabel.

(19)

(20)

(21)

c. Collspan dan Rowspan

 Menggabung kolom (Collspan)

<TABLE BORDER="3"

CELLPADDING="10"

CELLSPACING="4">

<TR>

</TR>

<TR>

</TR>

</TABLE></BODY>

(22)

 Menggabung Baris (Rowspan)

<TABLE BORDER="3"

CELLPADDING="10"

CELLSPACING="4">

<TR>

<TD ROWSPAN="2">1 &

3</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

(23)

d. Empty Cell

(24)

e. Cellspanding dan cellspacing

 Mengatur jarak antara border dengan isi sel (cellpanding)

 Contoh:

(25)

<html>

<P>Menggunakan tag <font face=courier new><b><

TABLE BORDER

CELLPADDING="10"></b></font><P>

<TR>

<TD>Baris #1 Kolom #1</TD>

</TR>

<TR>

</TR>

</TABLE></body></html>

(26)

• Mengatur jarak antara antara garis tepi (border)

bagian dalam dan luar. Contoh:

(27)

<html>

<head><title>CellSpacing</title></head>

<body>

<P>Menggunakan tag <font face=courier new><b><

TABLE BORDER CELLSPACING="10"></b></font><P>

<TR>

</TR>

<TR>

</TR>

</TABLE></body></html>

(28)

f. Back ground

(29)

(30)

(31)

2. Tag-Tag Tabel

a. Form

b. Frame

c. Font

d. CSS

(32)

a. Form

Salah satu fungsi formulir adalah untuk pendataan, apakah data dari pengunjung atau data dari website tersebut, atau yang lainnya, misalkan untuk Form Login ke website sebagai pengelola data atau untuk pendataan user dsb.

Pada suatu website form wajib ada minimal

untuk pendataan kontak dan pengunjung serta

pendaftaran user.

(33)

Daftar TAG Untuk Formulir

(34)

Untuk membuat sebuah Formulir atau Form menggunakan beberapa elemen, tergantung dari keperluan. Salah satu elemen pada HTML yang paling banyak digunakan pada Form adalah <input>. Berikut ini merupakan elemen- elemen yang diperlukan untuk input pada sebuah Form, Elemen <input> dapat ditampilkan dengan banyak cara, tergantung pada atribut type yang digunakan.

(35)

(36)

Penjelasan:

 TAG<form></form>, berfungsi untuk mendefinisikan/menciptakan sebuah

 formTAG<label></label>, berfungsi untuk memberikan keterangan pada sebuah text yang akan ditampilkan, dengan atribut for=”name”, dimana nilai name=dapat diganti dengan kebutuhan yang terkait dengan labelnya.

 TAG<input>, adalah sebuah elemen untuk mengontrol yang dimasukkan dimana memiliki atribut type (untuk tipe data), id dan name (untuk penamaan)

(37)

b. Frame

Framing digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML. Setiap bagian halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan ada bagian yang tetap jadi dapat melakukan efisiensi terhadap bandwidth koneksi internet dan mempercepat proses download halaman

(38)

(39)

c. Font

Untuk mengatur huruf pada HTML anda dapat menggunakan tag

<FONT> dan tag penutup </FONT>

1) Ukuran Font

Size=n adalah atribut yang digunakan untuk mengatur besarnya ukuran font. Nilai n berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7.

(40)

(41)

2) Jenis Font

Untuk mengatur jenis font Anda dapat menggunakan atribut face dengan sintaksis face=string. Nilai string berupa string yang menunjukkan nama font dan biasa lebih dari satu.

(42)

3) Warna Font

Untuk mengatur warna font Anda dapat menggunakan atribut color dengan sintaksis color= #RRGGBB. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB). Anda juga dapat menggantikan

#RRGGBB dengan konstanta warna yang ada pada browser.

(43)

d. CSS

 Dalam web design, penyajian data yang rapi dan menarik adalah kunci untuk meningkatkan pengalaman pengguna.

Salah satu elemen CSS yang berperan dalam hal ini adalah CSS table.

 Tabel, yang awalnya hanya dianggap sebagai alat sederhana untuk menampilkan data, kini bisa diubah menjadi karya seni visual dengan bantuan CSS. Dengan kombinasi kode yang tepat, tabel tidak hanya fungsional, tetapi juga estetik, responsif, dan interaktif.

(44)

Langkah-langkah untuk memulai desain dengan CSS table:

 Buat kerangka tabel dengan HTML: sebelum bekerja dengan CSS, pastikan kamu sudah memiliki kerangka dasar tabel dengan HTML. Tabel

HTML biasanya terdiri dari elemen < table >, < tr > untuk baris, dan < td >

untuk sel.

 Tentukan padding: padding adalah jarak antara konten sel dengan batas selnya. Kamu bisa menambahkan padding untuk membuat tabel terlihat lebih rapi. Contohnya, padding: 8px;

 Tambahkan pembatas horizontal: untuk memisahkan setiap baris,

tambahkan garis bawah pada setiap baris dengan kode. Contoh: border- bottom: 1px solid #ddd;

 Berikan efek hover: agar tabelmu interaktif, tambahkan efek hover.

Dengan efek ini, baris tabel akan berubah warna saat kursor mouse berada di atasnya.

 Buat tabel bergaris: untuk menambahkan efek zebra atau garis-garis pada tabel, gunakan properti nth-child() dengan background-color.

 Beri warna untuk tabel: kamu bisa memberikan warna background pada tabel atau sel-sel tertentu untuk membuatnya menonjol.

Misalnya, background-color: #04AA6D; color: white;

(45)