Sebelum kita
memulai membuat tabel alangkah lebih baik nya saya menjelaskan beberapa atribut
yang dibutuhkan di dalam tabel agar agan-agan tidak bingung nanti nya hehehe.
Berikut beberapa atribut yang di butuh kan di dalam tabel :
- Border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.
- Cellpandding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.
- Cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.
Untuk membuat
tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>,
tag <tr>, dan tag <td>:
- Tag <tabel> digunakan untuk memulai tabel
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Contoh
penggunaannya.
Memperhatikan
tag-tag tabel yang tersedia pada HTML kita akan membuat format tabel sederhana
yang akan menjadi bekal kita dalam membuat tabel. Berikut adalah skrip HTML
yang saya gunakan dalam membuat tabel :
<html>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil
dari kode di atas :
Contoh di atas
adalah sebuah tabel tanpa menggunakan atribut, penggunaan border, nilai dari atribut ini berupa angka yang diukur
dalam satuan pixel. Jika
anda memberikan nilai border=”2″,
maka web browser akan menampilkan garis tepi sebesar 2 pixel pada sisi atas, bawah,
kiri dan kanan tabel. Dan
ini adalah contoh kode yang mengunakan atribut Border:
<html>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil dari kode
diatas :
Dengan memberikan nilai ‘0’ kepada atribut border, tabel
seolah-olah tidak memiliki garis tepi. Perhatikan bahwa jika anda mengubah border=”1″ menjadi border=”5″ misalnya, maka garis
border yang terkena efek hanya border pada sisi luar tabel, namun tidak untuk
garis border di dalam tabel.
Penggunaan cellpadding, Jika
anda memberikan nilai cellpadding=”2″,
maka web browser akan membuat jarak sebesar 2
pixel dari border sisi dalam tabel dengan isi text tabel. Dan ini adalah contoh kode yang
mengunakan atribut Cellpadding:
<html>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2” cellpadding=”10”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2” cellpadding=”10”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil dari kode
di atas :
Pengaturan cellpadding
yang tepat akan membuat isi text tabel menjadi lebih rapi dan mudah dibaca.
Penggunaan cellspacing, Jika
anda memberikan nilai cellspacing=”2″,
maka web browser akan menampilkan jarak sebesar 2
pixel diantara garis border tabel.
Dan ini adalah
contoh kode yang mengunakan atribut Cellspacing:
<html>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2” cellspacing=”10”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
<head>
<title> Contoh Penggunaan Tabel </title>
</head>
<body>
<h1>Contoh Penggunaan Tabel</h1>
<table border=”2” cellspacing=”10”>
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil
dari kode di atas:
Menggabungkan ketiga atribut tersebut dalam sebuah tabel, maka kita
dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita. Dan