New!! yang ketiga
STRUKTUR TABEL HTML
A.
ELEMEN
DASAR TABEL
Tabel adalah salah satu
metode untuk menyajikan informasi dalam halaman web. Tabel terdiri dari baris
dan kolom ,baris adalah bagian mendatar ,dan kolom adalah bagian vertikal pada
tabel. Pertemuan antara baris dan kolom disebut cell. Cara mendekskripskan
sebuah tabel dalam pemrograman berbasis HTML menggunakan syntax sebagai
berikut.
<table>
<!--
isi baris dan kolom -->
</table>
Selanjutnya
, tambahkan baris baru di antara tag <table>…</table> dengan script
berikut.
<table>
<tr>
<!--isi baris ke 1-->
</tr>
<tr>
<!--isi baris ke 2-->
</tr>
</table>
Script
program yang lengkap adalah sebagai berikut.
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Elemen-elemen
yang ada pada tabel adalah sebagai berikut.
Nama
|
Fungsi
|
<table>…<table>
|
Untuk mendekskripsikan tabel dalam
halaman web
|
</tr>…<tr>
|
Untuk
mendekskripsikan baris dalam tabel
|
<td>…</td>
|
Untuk mendekskripsikan kolom dalam
tabel
|
Contoh
script tersebut adalah script untuk membuat sebuah tabel dengan 2 baris dan
setiap baris memiliki 3 kolom.
Sementara
itu, untuk mengatur posisi objek dalam cell
sebuah tabel, dapat digunakan beberapa atribut dalam tag </tr>…<tr>
sebagai
berikut.
§ Align : untuk
mengatur posisi horizontal sebuah objek dalam cell. Ada tiga jenis align yaitu left, center, dan right. Left
untuk posisi kiri cell, center untuk
posisi tengah cell, right untuk
posisi kanan cell.
§ Valign : untuk
mengatur posisi peletakan sebuah objek pada cell secara vertikal. Ada tiga
pilihan dalam menentukan atribut valign, yaitu top, middle, dan bottom. Top
untuk meletakkan sebuah objek pada posisi paling atas cell, middle untuk meletakkan sebuah objek pada posisi paling
tengah cell, dan bottom untuk
meletakkan sebuah objek pada posisi paling bawah cell.
Contoh :
Membuat tabel dalam halaman web.
<!--file
studikasus3-1.html-->
<html>
<head><title>Membuat
Struktur Tabel </title></head>
<body>
<center><hl>Data
Siswa TKJ</hl></center>
<table width="50%" border="1" cellspacing="0"
cellpadding="0"
align="center">
<tr>
<td align ="center"<strong>NIS</strong></td>
<td align
="center"<strong>NAMA</strong></td>
<td align
="center"<strong>ALAMAT</strong></td>
</tr>
<tr>
<td align
="center"<strong>110123456</strong></td>
<td align
="center"<strong>namamu</strong></td>
<td align ="center"<strong>alamatmu</strong></td>
</tr>
</table>
</body>
</html>
B.
ATRIBUT BORDER
Untuk
mengatur tebal dan lebar garis pada tabel , anda harus mengatur nilai atribut
border tabel ketika mendeklarasikan tabel . semakin besar nilai border, maka
semakin tebal garis yang ditampilkan pada halaman web. Nilai 0 pada border
menyebabkan tabel tampil seperti tidak memiliki garis. Semakin besar nilai
atribut border, lebar garis tabel juga semakin besar, namun hanya sisi luarnya
saja ,sedangkan bagian dalam tabel tetap sama. Besaran nilai atribut tabel
dihitung dalam ukuran pixel.
Contoh :
Men-setting
border tabel dalam halaman web
<!--file
studikasus3-2.html-->
<html>
<head><title>Mengatur
Border</title>
</head>
<body>
tabel
dengan border berukuran 0
<center><hl>Data
Siswa TKJ</hl></center>
<table width="10%" border="0" cellspacing="0">
<tr></tr>
<td
align = "center">45</td>
<td
align = "center">46</td>
</tr>
<tr>
<td
align = "center">50</td>
<td
align = "center">51</td>
</tr>
</table>
tabel
dengan border berukuran 1
<center><hl>Data
Siswa TKJ</hl></center>
<table width="10%" border="1" cellspacing="0">
<tr></tr>
<td
align = "center">45</td>
<td
align = "center">46</td>
</tr>
<td
align = "center">50</td>
<td
align = "center">51</td>
<tr>
</table>
tabel
dengan border berukuran 12
<center><hl>Data
Siswa TKJ</hl></center>
<table width="10%" border="12" cellspacing="0">
<tr></tr>
<td
align = "center">45</td>
<td
align = "center">46</td>
</tr>
<td
align = "center">50</td>
<td
align = "center">51</td>
<tr>
</table>
</body>
</html>
hasilnya :
hasilnya :
Penjelasan
:
Nilai
besaran tabel garis pada tabel dapat ditentukan pada script
<table width="10%" border="1"
cellspacing="0">, perhatikan kode tersebut. Nilai border =
“1” menyebabkan tampilan lebar garis tebal sebesar 1 pixel.
C.
ELEMEN HEADER
Header
dalam tabel untuk memberikan informasi data dalam kolom sebuah tabel. Header
diletakkan pada baris pertama dalam tabel. Untuk mendeklarasikan header pada
tabel, anda perlu menambahkan elemen tag <th> pad bagian awal script dan
</th> pada bagian akhir script. Kelebihan penggunaan header pada tabel
adalah teks yang diletakkan pad header secara otomatis berada pada posisi
tengah (center) tanpa harus menambahkan atribut align=”center”.
Contoh :
<!--file
studikasus3-3.html-->
<html>
<head><title>Membuat
header tabel</title>
</head>
<body>
<table
width="40%" border="1" cellspacing="0"
align="center">
<tr>
<th>NIS</th><!--Header
tabel -->
<th>NAMA</th><!--Header
tabel-->
</tr><tr>
<td
align = "center">1006854</td>
<td align =
"center">namamu </td>
</tr>
</table>
</body>
</html>
Pada
elemen header tabel, anda dapat
menerapkan atribut scope dan headers untuk menghubungkan kolom dan
baris dalam cell. Atribut scope digunakan untuk menghubungkan data kolom dan baris, selain itu dapat diisi
dengan nilai col, colgroup, row dan rowgrou
Contoh :
Membuat
header dengan scope
<html>
<head><title>Membuat
Header Tabel dengan Scope</title>
</head>
<body>
<table width="50%"
border="1" cellspacing="0">
<tr>
<th> </th>
<th
scope="col">Senin</th><!--Scope colom-->
<th
scope="col">Selasa</th><!--Scope colom-->
<th
scope="col">Rabu</th><!--Scope colom-->
</tr>
<tr>
<th
scope="row">X-tkj</th><!--Scope colom-->
<td>Sistem Operasi I</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope="row">X-TKJ</th><!--Scope
colom-->
<td>Pemrograman Dasar</td>
<td>Membangun Web</td>
<td>Web programming</td>
</tr>
<tr>
<th scope="row">XII-TKJ</th><!--Scope
colom-->
<td>Wide Area
Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
</tr>
</table>
</body>
</html>
Atribut
headers pada elemen header akan menerima nilai berupa id dari cell untuk merujuk
kaitan
antar header sumber tabel. Perhatikan
contoh program dibawah ini.
Contoh :
Membuat
header dengan atribut headers
<file studikasus3-5.html>
<html>
<head><title>Header Dengan
Atribut Headers </title>
</head>
<body>
<table width="40%"
border="1" cellspacing="0" cellpadding="0">
<tr>
<th
id="siswa" rowspan="2">SISWA</th>
<th
id="siswa" colspan="2">NILAI</th>
</tr>
<th id="ipa"
scope="col"<IPA</th>
<th id="ips"
scope="col"<IPA</th>
<th id="kwu"
scope="col"<IPA</th>
</tr>
<th id="ipa"
scope="col"<IPA</th>
<th id="ips"
scope="col"<IPA</th>
<th id="kwu"
scope="col"<IPA</th>
</tr>
<tr>
<th id="agung"
scope="row">Agung</th>
<th headers="siswa agung ipa
nilai"align="center">80</td>
<th headers="siswa agung ips nilai"align="center">76</td>
<th headers="siswa agung kwu
nilai"align="center">55</td>
</tr>
<tr>
<th id="tita"
scope="row">Tita</th>
<th headers="siswa agung ipa
nilai"align="center">87</td>
<th headers="siswa agung ips
nilai"align="center">56</td>
<th headers="siswa agung kwu
nilai"align="center">45</td>
</tr>
</table>
</body>
</html>
E. ELEMEN CAPTION
Untuk
memberikan sebuah judul pada tabel, dapat menggunakan elemen caption dengan tag
<caption> … </caption>.
Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel <table>.
Posisi default caption berada di atas tabel.
Contoh :
Membuat
caption tabel
<!--file
studi kasus3-6.html-->
<html>
<head><title>Membuat
Caption Tabel</title></head>
<body>
<tr>
<table
width="40%"border="1"cellspacing="2"
cellpadding="0">
<caption>Data
Siswa SMK</caption><!--Caption tabel-->
<tr>
<th>NIS</th><!--Header
tebal-->
<th>NAMA</th><!--Header
tebal-->
</tr>
<td
align="center">19897657</td>
<td
align="center">your name</td>
</tr>
</table>
</body>
</html>
F. ATRIBUT CELLPADDING DAN CELLSPACING
Atribut
cellpadding pada tabel berfungsi untuk mengatur jarak dari border sisi dalam
tabel dengan isi teks tabel dalam cell. Nilai atribut ini berupa angka dalam
satuan pixel. Jika nilai cellpadding=”3”
maka jarak tabel sebesar 3 pixel dari border sisi dalam tabel dengan isi
tabel.
Adapun atribut cellspacing berfungsi untuk
mengatur jarak antara bagian border dalam dan luar. Semakin tinggi nilai
atribut cellspacing maka semakin lebar jarak bagian border dalam dan luar.
Contoh nilai cellspacing=”2”, maka
jaraknya sebesar 2 pixel diantara garis border tabel.
Contoh :
<!--file studikasus3-7.html-->
<html>
<head>
<title>Mengatur Cellpadding dan
Cellspacing Tabel</title>
</head>
<body>
<caption>Data Siswa SMK</caption><!--Caption
tebal-->
<tr>
<th>NIS</th><!--Header
tabal-->
<th>NAMA</th><!--Header
taSbal-->
</tr> <tr>
<td
align="center">12345678</td>
<td
align="center">your name</td>
</tr></table>
</body></html>
G. MENGGABUNGKAN CELL
Anda
dapat menggabungkan dua cell sekaligus menjadi satu, ada dua atribut yaitu dengan
menggunakan atribut colspan dan rowspan, sebagai berikut.
§ Colspan
Digunakan untuk menyatakan satu atau
lebih cell berdasarkan kolom. Contoh : colspan=“2”
berarti menggabungkan dua cell menjadi satu cell.
§ Rowspan
Digunakan untuk menyatukan satu atau
lebih cell berdasarkan baris. Contoh: Rowspan=”2”
berarti menggabungkan satu cell menjadi satu cell.
Menggabungkan dua cell menjadi satu cell.
<!--file
studi kasus3-6.html-->
<html>
<head><title>Mengatur
Lebar Cell Tabel </title></head>
<body>
<table
width="37%"border="1"cellspacing="0"
cellpadding="0">
<tr>
<td
width="22%" rowspan="2"><div align="center">NIS</div></td>
<td
width="31%" rowspan="2"><div
align="center">NAMA</div></td>
<td colspan
="3"><div align="center">Nilai Pelajaran
</div></td>
</tr>
<tr>
<td>165675447</td>
<td>Your name </td>
<td>90</td>
<td>88</td>
<td>78</td>
</tr>
</table>
</body>
</html>
H. MENGATUR BACKGROUND
Background
secara harfiah berarti latar belakang. Ada dua jenis background yang dapat
diterapkan pada tabel yaitu berupa gambar dan warna. Langkah-langkah menerapkan
background gambar pada tabel, antara lain :
1.
Buatlah
folder BG pada direktori C (C:/BG)
2.
Persiapkan
gambar yang akan dijadikan background sebuah tabel, baik dalam format .jpg,
.jpeg, atau .bmp. letakkan file gambar tersebut ke dalam folder BG dalam satu
folder dengan file html yang akan dibuat.
3.
Selanjutnya
buat file “gambar.html” dan tulis kode berikut.
Contoh :
Mengatur
background gambar pada tabel
<!--file
studi kasus3-7.html-->
<html>
<head><title>Mengatur
Background Gambar Pada Tabel</title></head>
<body>
<table
align=”center” widht="30%" border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header
tabel -->
<th>NAMA</th><!--Header
tabel-->
</tr>
<tr>
<td align =
"center">165675447</td>
<td align =
"center">your name</td>
</tr>
</table>
</body>
</html>
Atribut
background gambar pada tabel ditunjukkan pada potongan kode program
background=”foto.jpg” pada scipt <table align=”center” wdth=”30%” border=”1”
background=”foto.jpg”> . file foto.jpg terletak pada satu folder dengan file
gambar.html, sehingga tidak perlu memanggil secara utuh path file berada.
Adapun
untuk membuat latar belakang tabel dengan warna tertentu, perlu itambahkan
atribut bgcolor=”FFFF33”, dengan
bgcolor sebagai atribut untuk mengatur wara tabel.
Untuk mengatur background berupa gambar
atau memberi latar belakang dengan warna tertentu pada cell, prosedurnya sama
seperti pada tabel.
Contoh :
Mengatur
background warna pada tabel.
<!--file
studi kasus3-8.html-->
<html>
<head><title>Mengatur
Background Gambar Pada Tabel</title></head>
<body>
<table
align=”center” widht="30%"
border=”1” bgcolor=”FFFF33”>
<tr>
<th>NIS</th><!--Header
tabel -->
<th>NAMA</th><!--Header
tabel-->
</tr>
<tr>
<td align =
"center">165675447</td>
<td align =
"center">your name</td>
</tr>
</table>
</body>
</html>
I. ATRIBUT ALIGN
Anda
dapat menentukan posisi isi dalam cell menggunakan atribut align. Ada tiga
nilai atribut yaitu left, center, dan right. Left digunakan untuk meletakkan
isi pada sisi sebelah kiri cell, center untuk meletakkan isi cell pada posisi
tengah, right untuk meletakkan isi cell pada sisi sebelah kanan.
Contoh :
Menentukan posisi isi
cell dengan align.
<!--file
studi kasus3-11.html-->
<html>
<head><title>Background
Warna Pada Tabel</title></head>
<body>
<table
align=”center” widht="30%" border=”1”
bgcolor=”FFFF33”>
<tr>
<th align=”left”>NIS</th><!--Header
tabel pada posisi kiri -->
<th
align=”right”>NAMA</th><!--Header tabel pada posisi kanan-->
</tr>
<tr>
<td align =
"center">165675447</td><!—isi sel pada posisi
tengah-->
<td align =
"center">your name</td>
</tr>
</table>
</body>
</html>
J. MELETAKKAN TABEL DI DALAM TABEL
Format
tabel menjadi sangat penting sekali untuk menjadikan layout sebuah tampilan
halaman web, dengan menggunakan tabel , anda dapat menentukan struktur utama
sebuah web, mulai dari heading, halaman web, body halaman web, dan footing
sebuah halaman. Teknik sederhananya adalah meletakkan tabel didalam tabel utama.
Contoh :
Menentukan posisi isi
cell dengan align.
<!--file
studi kasus3-11.html-->
<html>
<head><title>Background
Warna Pada Tabel</title></head>
<body>
<table
align=”center” widht="80%"
border=”1” bgcolor=”FFFF33”>
<caption>Tabel
terletak pada sel 1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<td align =
"center">165675447</td>
<td align =
"center">your name</td>
</tr>
</table>
</td>
<td>
<table
align=”center” widht="80%"
border=”1” bgcolor=”FFFF33”>
<caption>Tabel
terletak pada sel 1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<td align =
"center">165675447</td>
<td align =
"center">your name</td>
</tr>
</table>
</body>
</html>
Hasil script diatas.
K.
ATRIBUT
FRAME
Atribut
frame digunakan untuk mengatur jenis border luar pada tabel. Ada beberapa nilai
yang digunakan pada atribut frame, antara lain:
1. Above,
2. Bellow,
3. Border,
4. Box,
5. Hsides,
6. Lhs,
7. Rhs,
8. Void,
dan
9. Vsides.
Berikut cara memasukkan nilai paa
atribut frame tabel
Contoh :
Menggunakan aribut frame
<table frame="box">
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut
Frame</title>
</head>
<body>
<table frame="box">
<tr>
<td
align="center"><strong>NIS</strong></td>
<td
align="center"><strong>NAMA</strong></td>
<td
align="center"><strong>ALAMAT</strong></td>
</tr>
<tr>
<td
align="center"><strong>123456</strong></td>
<td
align="center"><strong>namamu</strong></td>
<td
align="center"><strong>nama kotamu</strong></td>
</tr>
</table>
</body></html>
okee sekian dari materi kali ini semoga bisa bermanfaat untuk semuanya . thanks for all ☺☺
tetap pelajari dan pahami guys, karena ilmu didapat dari seberapa banyak kita membaca dan memahami. bye..
okee sekian dari materi kali ini semoga bisa bermanfaat untuk semuanya . thanks for all ☺☺
tetap pelajari dan pahami guys, karena ilmu didapat dari seberapa banyak kita membaca dan memahami. bye..
Komentar
Posting Komentar