Tutorial Implementasi TABLE HTML
1. Heading
Siapkan notepad lalu implementasikan table html berikut di notepad. Dan simpan lalu
beri nama file table.html dengan save type: All Files
<table border="1">
<tr> <td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td> </tr>
<tr> <td>Cell 3 - Baris 2 Kolom 1</td>
<td>Cell 4 - Baris 2 Kolom 2</td> </tr>
<tr> <td>Cell 5 - Baris 3 Kolom 1</td> <td>Cell 6 - Baris 3
Kolom 2</td> </tr>
</table>
Maka hasilnya
2. Mengatur Lebar& Tinggi Tabel
Untuk mengatur lebar table digunakan atribut width atau bisa
juga dengan style CSS dengan properti width. Untuk lebar dan
tinggi dari td kita gunakan atribut style dengan properti width
dan height.
<table border="1" width="75%">
<tr>
<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td>
</tr>
</table>
3. Menggabungkan kolom pada table
Table Cell atau baris dan kolom dari tabel tersebut dapat
kita gabungkan sesuai kebutuhan bentuk tabel yang
diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan
atribut colspan.
<table border="1" width="75%">
<tr> <td colspan="2">Gabungan Kolom 1&2 padaBaris 1</td> </tr>
<tr> <td style="width:50%">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td> </tr>
<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td>
</tr> </table>
Sedangkan untuk menggabungkan baris dalam tabel
digunakan atribut rowspan.
<table border="1" width="75%">
<tr> <td style="width:50%" rowspan="2">Gabungan
Baris 1&2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td> </tr>
<tr> <td>Baris 2 Kolom 2</td> </tr>
<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td>
</tr> </table>
4. Mengatur jarak kolom pada table
Untuk mengatur posisi cell dalam tabel
digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari
bagian dalam cell.
<table border="1" width="75%" cellpadding="8">
<tr>
<td style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar
cell.
<table border="1" width="75%" cellspacing="8">
<tr>
<td style="width:50%">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
5. Membuat titel pada table
Untuk tabel yang lengkap dengan titel, kita bisa
menambahkan tag <caption> tepat setelah tag <table>
dan kita juga bisa mengganti td dengan th (table
heading) sebagai titel dari baris maupun kolom.
<table border="1" width="75%">
<caption>Ini Title Table</caption>
<tr>
<th style="width:50%;">Header Kolom 1</th> <th>Header
kolom 2</th> </tr> <tr>
<td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>
<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td>
</tr>
</table>
6. Membuat background pada table
Untuk membuat background pada tabel kita gunakan atribut
style dengan properti background.
<table style="background:#ffc" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Sekian tutorial cara mengimplementasikan Table HTML…
