Dalam pembuatan tabel kita mengenal bagian judul, isi, kolom
dan baris. Untuk memulai membuat sebuah tabel pertama harus diawali
dengan<table> dan di akhiri <table>. Dalam proses pembuatannya
judul dari suatu tabel menggunakan <th></th>, untuk pindah kolom
menggunakan <tr></tr>, dan untuk pindah baris menggunakan <td></td>. Dalam menggunakan <th> dan <td> akan
otomatis akan mencetak kesamping, untuk itu untuk membatasinya kita menggunakan <tr>.
Coba script di bawah
ini :
<html>
<head><title>tabel</title></head>
<body>
<table>
<tr>
<th>nama</th>
<th>kelas</th>
</tr>
<tr>
<td>rija</td>
<td>1ia18</td>
</tr>
<tr>
<td>boy</td>
<td>1ia18</td>
</tr>
</table>
</body>
</html>
Jika anda sudah coba script diatas maka tampilannya akan
seperti ini :
“Loh.. kenapa?? Kok tabel gak ada garisnya??!!! Wtf..” nah
untuk memperbaiki masalah tersebut kita menggunakan perintah border. Coba anda
tambahkan border=”1”
Contoh :
<table
border="1">
Setelah itu hasinya akan seperti ini :
Selain itu kita juga bisa mengatur besarnya kotak cell pada
tabel dengan menggunakan cellspacing dan cellpadding. cellspacing digunakan
untuk memberi jarak spasi antar cell. cellpading digunakan untuk memberi jarak
atas dan bawah didalam cell. pemberian cellspacing dan celladding diletakan di
dalam <tabel>.
Contoh :
<table
border="1" cellspacing="5" cellpadding="5" >
Setelah itu hasilnya akan seperti ini :
Selain itu kita juga bisa memerikan warna pada cell dengan
menggunakan <bg color=”nama_warna”>. Pemberian warna pada cell diletakan didalam
<th> dan <td>.
Contoh :
<th bgcolor="blue">nama</th>
<td bgcolor="blue">1ia18</td>
<td bgcolor="blue">boy</td>
<th bgcolor="blue">nama</th>
<td bgcolor="blue">1ia18</td>
<td bgcolor="blue">boy</td>
Setelah itu hasilnya seperti ini :
Untuk memudahkan anda dalam belajar script jadinya program
tabel tersebut seperti ini :
<html>
<head><title>tabel</title></head>
<body>
<table
border="1" cellspacing="5" cellpadding="5" >
<tr>
<th
bgcolor="blue">nama</th>
<th>kelas</th></tr>
<tr>
<td>rija</td>
<td bgcolor="blue">1ia18</td>
</tr>
<tr>
<td bgcolor="blue">boy</td>
<td>1ia18</td>
</tr>
</table>
</body>
</html>
Selamat Mencoba ^0^
No comments:
Post a Comment
silahkan komentar disini