A.
Elemen Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Nama
|
Fungsi
|
<table>....</table>
|
Untuk mendeskripsikan tabel dalam
halaman web
|
<tr>....</tr>
|
Untuk mendeskripsikan baris dalam
tabel
|
<td>....</td>
|
Untuk mendeskripsikan kolom dalam
tabel
|
Untuk mengatur posisi objek dalam cell
sebuah tabel, dapat digunakan beberapa atribut dalam tag
<tr>....</tf> sbg berikut.
·
Align, digunakan untuk mengatur posisi
horizontal sebuah objek dalam cell tabel. Ada 3 jenis align, yaitu: left,
center, dan right. Left untuk posisi kiri cell, center untuk posisi tengah
cell, dan right untuk posisi kanan cell.
·
Valign, digunakan untuk mengatur posisi
peletakan sebuah objek pada cell secara vertikal. Ada pilihan dalam
menentukan atribut valign, yaitu top,
middle, dan bottom. Top digunakan untuk meletakkan sebuah objek pada posisi paling
atas cell, middle untuk meletakkan objek pada tengah cell, dan bottom untuk
meletakkan objek pada posisi paling bawah cell.
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></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”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
<td align=”center”>Kediri</td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</table>
</body>
B.
Atribut Border
Untuk mengatur tebal dan lebar garis pada
tabel, harus mengatur nilai atribut border table ketika mendeklarasikan tabel.
Semakin besar nilai border, semakin tabal pula garis yg ditampilkan. Jika nilai
atribut border semakin besar, lebar garis tabel juga semakin besar.
Contoh men-setting border tabel dalam
halaman web:
<!—file
apasaja.html-->
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<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
<table width=”10%” border=”1” 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 12
<table width=”10%” border=”12” 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>
</body>
</html>
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<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
<table width=”10%” border=”1” 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 12
<table width=”10%” border=”12” 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>
</body>
</html>
C.
Elemen Header
Header dalam tabel berguna untuk memberikan
informasi data dalam kolom sebuah tabel. Untuk mendeklarasikan header pada
tabel, perlu menambahkan elemen tag </th> pada bagian awal script dan
</th> pada akhir script.
Pada elemen header tabel, dapat menerapkan
atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell.
Atribut scope digunakan untuk menghibungkan data kolom dan baris. Atribut scope
dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
contoh :
<!—file apasaja.html-->
<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-->
contoh :
<!—file apasaja.html-->
<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 row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
D.
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, yaitu berada diatas tabel.
Contoh membuat caption tabel :
<!—file
apasaja.html-->
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
E.
Atribut Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk
mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell.
Adapun atribut cellspacing berfungsi untuk mengatur jarak antara border bagian
dalam dan luar. Semakin tinggi nilai atribut cellspacing, semakin lebar pula jarak
antara border dalam dengan luar.
Contoh mengatur cellpadding dan cellspacing
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
F.
Menggabungkan
Cell
Ada 2 atribut yg dapat digunakan untuk
menggabungkan 2 buah cell menjadi 1 cell, yaitu :
a)
Colspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom.
b)
Rowspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan baris.
Contoh menggabungkan dua cell menjadi satu :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<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 width=”15%”><div align=”center”>IPA</div></td>
<td width=”15%”><div
align=”center”>IPS</div></td>
<td width=”17%”><div
align=”center”>AGAMA</div></td>
</tr>
<tr>
<td>1234567890</td>
<td>Nabila
Mutiara Rachman</td>
<td>80</td>
<td>88</td>
<td>78</td>
</tr>
</table>
</body>
</html>
</body>
</html>
G.
Mengatur Background
Background secara harfiah berarti latar
belakang. Ada 2 jenis background yg dpt diterapkan pada tabel, yaitu berupa
gambar dan warna. Langkah-langkah menerapkan background gambar pada tabel
adalah sbg berikut.
a.
Buatlah folder BG pada direktori C (C:\BG)
b.
Persiapkan gambar yg akan dijadikan background
sebuah tabel, baik dalam format .jpg, .jpeg, atau .bmp. letakkan file gambar
tersebut kedalam folder BG dalam 1 folder dengan file html yg akan dibuat
c.
Selanjutnya, buat file “gambar.html” dan tulis
kode seperti contoh berikut
Contoh mengatur background gambar pada tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header
tabel-->
<th>NAMA</th><!--Header
tabel-->
</tr>
<tr>
<td
align=”center”>1234567890</td>
<td
align=”center”>Nabila Mutiara R </td>
</tr>
</table>
</body>
</html>
</body>
</html>
Contoh menagtur background warna pada tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” bgcolor=”#FFFF33”>
<tr>
<th>NIS</th><!--Header
tabel-->
<th>NAMA</th><!--Header
tabel-->
</tr>
<tr>
<td
align=”center”>1234567890</td>
<td
align=”center”>Nabila Mutiara R </td>
</tr>
</table>
</body>
</html>
</body>
</html>
H.
Atribut Align
Ada 3 nilai yang dapat diterapkan pada
atribut align, yaitu left, center, dan right. Left digunakan untuk meletakkan
isi pada sisi sebelah kiri cell, center digunakan untuk meletakkan isi pada
posisi tengah, dan right untuk meletakkan isi pada sisi sebelah kanan
Contoh menentukan posisi isi cell dengan
align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<th
align=”left”>NIS</th><!--header tabel berada pada posisi kiri-->
<th
align=”right”>NIS</th><!--header tabel berada pada posisi kanan-->
</tr>
<tr>
<tr>
<td
align=”center”>1234567890</th><!--isi sel pada posisi tengah-->
<td align=”center”>Nabila
Mutiara R</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
I.
Meletakkan Tabel di Dalam Tabel
Dengan menggunakan tabel dapat menentukan
struktur utama sebuah web. Teknik sederhana yg dapat digunakan untuk melakukan
hal tersebut adalah meletakkan tabel di tabel utama.
Contoh menentukan isi cell dengan align :
<!--file
apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel
terletak pada sel 1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td
align=”center”>1234567890</td>
<td align=”center”>Nabila
Mutiara R</td>
</tr>
</table>
</td>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel
terletak pada sel 2</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila
Mutiara R</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>
</body>
</html>
J.
Atribut
Frame
Atribut frame pada tabel digunakan untuk
mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada
atribut frame, antara lain :
1.
Above
2.
Bellow
3.
Border
4.
Box
5.
Hsides
6.
Lhs
7.
Rhs
8.
Void
9.
Vsides
contoh menggunakan atribut frame :
<table frame=”box”>
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>
<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>
<tr>
<td
align=”center”>1234567890</td>
<td
align=”center”>Nabila Mutiara R</td>
<td
align=”center”>Kediri</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
Terimakasih JJJ
Tidak ada komentar:
Posting Komentar