Contoh tabel code HTML pembuatan table:
<table border=1>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Atribut border digunakan untuk menampilkan garis pembatas di sekeliling cell (border). Jika kita tidak menginginkannya, kita dapat membuat nilai atribut ini menjadi 0 border = "0".
Kita juga dapat mengatur border dari property css:
table, th, td {
border: 1px solid black;
}
Atribut Cellpadding dan Cellspacing
Atribut cellpadding dan cellspacing digunakan untuk mengatur spasi pada cell tabel. Cell spacing untuk mengatur lebar border, sementara cellpadding mengambarkan jarak antara cell border dengan konten yang ada di dalam cell.
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Merge Cell dengan Atribut Colspan dan Rowspan
Kita dapat membuat merge dengan menggunakan atribut colspan dan rowspan. Untuk menyatukan kolom kita menggunakan colspan, sementara untuk menyatukan baris kita dapat menggunakan rowspan.
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr><td rowspan="2">Baris 1 Cell 1</td><td>Baris 1 Cell 2</td><td>Baris 1 Cell 3</td></tr>
<tr><td>Baris 2 Cell 2</td><td>Baris 2 Cell 3</td></tr>
<tr><td colspan="3">Baris 3 Cell 1</td></tr>
</table>
Warna Background dan Border Tabel
Untuk mempercantik tampilan tabel dapat ditambahkan warna pada background dan border.
<table border="1" bordercolor="red" bgcolor="yellow">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Backgrount Tabel Gambar
Atau menggunakan gambar sebagai background.
<table border="1" bordercolor="red" background="sample.jpg">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Ukuran Table dengan Atribut Height dan Width
Untuk mengatur ukuran table dapat menggunakan atribut height dan width, jika tidak mengatur ukuran kolom dan cell maka ukurannya akan otomatis menyesuaikan.
<table border="1" width="400" height="150">
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Judul Tabel dengan Tag Caption
Kita dapat menambahkan judul untuk sebuat tabel dengan menggunakan tag caption.
<table border="1">
<caption>Data Peserta</caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rani Irsan</td>
</tr>
<tr>
<td>2.</td>
<td>Ibenk Raharjo</td>
</tr>
</table>
Header, Body, dan Footer Tabel
Bagian dlam sebuah tabel dapat dibagi menjadi 3 yaitu header, body, dan footer dengan elemen pembentuk sebagai berikut:
- <thead> - membuat header tabel yang akan ditampilkan di bagian atas.
- <tbody> - mengindikasikan bagian utama dari sebuah tabel.
- <tfoot> - membuat footer tabel yang akan ditampilkan di bagian bawah.
<thead>
<tr>
<td colspan="4">Ini adalah header tabel.</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Ini adalah footer tabel.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Nilai 1</td>
<td>Nilai 2</td>
<td>Nilai 3</td>
<td>Nilai 4</td>
</tr>
</tbody>
</table>
Tabel dalam Tabel
Apakah mungkin kita menyimpan elemen tabel dalam sebuah elemen tabel lainnya? Jawabanya adalah bisa. Untuk lebih jelasnya lihat contoh berikut:
<table border="1" width="100%">
<tr>
<td colspan=3>
<table border="1" width="100%">
<tr>
<th>No.</th><th>Nama</th>
</tr>
<tr>
<td>1</td><td>Rani Irsan</td>
</tr>
<tr>
<td>2</td><td>Ibenk Raharjo</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Merah</td><td>Kuning</td><td>Hijau</td>
</tr>
</table>
Click here if you like this article.
0 Comments