Penulisan Tabel pada HTML
Untuk dapat membuat tabel di HTML menggunakan tag <table> dimana tag ini salah satu tag yang ditulis secara berpasangan yakni membutuhkan tag pembuka <table> dan penutup </table>, sedangkan untuk membuat baris di dalam tabel menggunakan tag <tr></tr> atau table row, dan untuk pembuatan kolom yaitu menggunakan tag </td></td> atau table data. Di samping itu beberap hal yang perlu diketahui yakni apa saja atribut-atribut yang dapat di gunakan pada tag table, berikut ini daftarnya.| Atribut | Nilai | Keterangan |
|---|---|---|
| Align | left, right, center | Digunakan untuk perataan keseluruhan teks didalam tabel |
| bgcolor | rgb(x,x,x), #xxxxxx, namawarna | Digunakan untuk pemberian warna latar pada tabel |
| Border | 1, 0 | Untuk menampilkan garis tabel. |
| cellpading | Pixels | Digunakan untuk memberikan jarak antara sel. |
| cellspacing | Pixels | Digunakan untuk memberikan jarak antara sel dan tabel. |
| width | Pixels, % | Untuk menentukan lebar tabel. |
Contoh Membuat Tabel di HTML
Berikut ini adalah contoh untuk membuat tabel di html dengan sederhana, silahkan buka text editor kesukaan anda, lalu ketikan kode dibawah ini.<!DOCTYPE html>
<html>
<head>
<title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
<h1>Contoh Tabel Sederhana</h1>
<table border="1">
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
</table>
</body>
</html>
Dari kode tabel html diatas maka seharusnya akan muncul seperti gambar di bawah ini.
Menambahkan Atribut Cellspacing pada Tabel
Selain itu anda juga dapat mengatur jarak antara sel dengan tabel, dimana akan ada ruang yang dapat disesuaikan antara garis utama bagian luar dan garis antar sel dengan menggunakan atribut cellspacing, berikut ini contoh kode nya.<!DOCTYPE html>
<html>
<head>
<title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
<h1>Contoh Tabel Sederhana Dengan Cellspacing</h1>
<table border="1" cellspacing="10px">
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
</table>
</body>
</html>
Silahkan lihat hasilnya, seharusnya seperti gambar dibawah ini.
Menambahkan Atribut Cellpadding Pada Tabel
Selain cellspacing, ada juga atribut cellpadding untuk penjelasan silahkan lihat tabel diatas, contoh penulisan kode seperti dibawah ini.<!DOCTYPE html>
<html>
<head>
<title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
<h1>Contoh Tabel Sederhana Dengan Cellpadding</h1>
<table border="1" cellpadding="10px">
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
</table>
</body>
</html>
Maka akan tampil seperti gambar di bawah ini.
Dari kedua atribut di atas silahkan anda coba gabungkan antara cellspacing dan cellpading, berikanlah nilai-nilai sesuai ke inginan agar dapat melatih pembuatan tabel ini.
Membuat Judul Tabel Dengan HTML
Selain mengatur jarak tabel, biasanya dalam apapun tabel memiliki sebuah judul, judul dalam tabel ini sebenarnya sama saja seperti pada Ms. Word, caranya adalah dengan menambahkan tag <caption></caption> tepat dibawah tag <table></table> diluar dari table row, silahkan lihat kode dibawah ini.<!DOCTYPE html>
<html>
<head>
<title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
<h1>Contoh Tabel Sederhana Dengan Judul</h1>
<table border="1">
<caption>Contoh judul tabel</caption>
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
<tr>
<td>Ini adalah contoh tabel sederhana</td>
<td>Ini adalah contoh tabel sederhana</td>
</tr>
</table>
</body>
</html>
Berikut ini adalah penampakan sebuah judul pada tabel dengan kode html diatas.
Tidak ada komentar:
Posting Komentar