ADSENSE HERE!
Pembuatan Tabel Menggunakan HTML
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan
teks atau gambar dalam format lajur dan kolom bias juga menggunakan tabel untuk
membantu me-layout tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column.
Untuk membuat tabel, anda menggunakan tag dan menutupnya dengan tag </table>.
Anda bisa juga menambahkan atribut lain di tag pembuka.
Misalnya menentukan warna, border, dan sebagainya.
Di dalam tag ada beberapa tag lain yang perlu dipahami, yaitu :
- a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row
- b. Tag <td>
Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Tabel Data
- c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH singkatan dari Table Header.
Menggabungkan Sel
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin
membuat sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya,
maka satu-satunya cara yang bisa kita lakukan adalah dengan menggabungkan
beberapa sel menjadi satu. Cara ini disebut merge atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan.
Atribut rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang
sama. Atribut colspan untuk menggabungkan sel-sel tabel pada baris yang sama.
Berikut contoh penggabungan kedua jenis :
- Secara Vertikal (Rowspan)
Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan digabung:
- Setelah digabung maka kondisi kode HTML menjadi seperti berikut:
- Secara Horisontal (Colspan)
Tabel dengan kode HTML dibawah ini sel-sel baris pertama akan digabung:
- Setelah digabung maka kondisi kode HTML menjadi seperti berikut :
Contoh script pembuatan tabel
<html>
<head>
<title>Contoh 03</title>
</head>
<body>
<h1>Tabel Data Siswa</h1>
<table border=1 bgcolor=pink>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Alamat</th>
<th>Tempat, Tanggal Lahir</th>
<th>Jurusan</th>
</tr>
<tr>
<td>121666666</td>
<td>Moskov</td>
<td>Jungle</td>
<td>Jakarta, 17 Agustus 1945</td>
<td>Marksman</td>
</tr>
<tr>
<td>12169696969</td>
<td>Saber</td>
<td>Jungle</td>
<td>Jakarta, 18 Agustus 1945</td>
<td>Assasin</td>
</tr>
<tr>
<td>12196969696</td>
<td>Karina</td>
<td>Jungle</td>
<td>Jakarta, 19 Agustus 1945</td>
<td>Assasin</td>
</tr>
</body>
</html>
Jika dilihat di browser, maka terlihat sebagai berikut :
Penggunaan Cellpadding dan cellspacing
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut Cellpadding dan Cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding & cellspacing dalam Tabel</h3>
<table border="1"cellspacing="0"cellpadding="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br/>
<table border="1"cellspacing="3"cellpadding"5">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil di browser :
Penggunaan Rowspan dan colspan
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td colspan="2">Baris 2, Kolom 2 & 3</td>
</tr>
<tr>
<td rowspan="2"> Baris 3 & 4, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>\
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil di browser :
ADSENSE HERE!
No comments:
Post a Comment