CARA MEMBUAT TABEL DI POSTINGAN BLOG | KODE HTML
Mungkin sesekali dalam penulisan artikel kita memerlukan tabel untuk menjelaskan isi dari artikel kita. Berikut penjelasan pembuatan tabelnya.
Kode HTML tabel
<table width="300" border="1">
<tr>
<td>Kotak 1 A </td>
<td>Kotak 1 B </td>
<td>Kotak 1 C </td>
</tr>
<tr>
<td>Kotak 2 A </td>
<td>Kotak 2 B </td>
<td>Kotak 2 C </td>
</tr>
</table>
<tr>
<td>Kotak 1 A </td>
<td>Kotak 1 B </td>
<td>Kotak 1 C </td>
</tr>
<tr>
<td>Kotak 2 A </td>
<td>Kotak 2 B </td>
<td>Kotak 2 C </td>
</tr>
</table>
Dan hasilnya:
| Kotak 1 A | Kotak 1 B | Kotak 1 C |
| Kotak 2 A | Kotak 2 B | Kotak 2 C |
Keterangan dari kode HTML di atas adalah:
Kode buka tutup <tr> </tr> menentukan jumlah BARIS dari tabel.
Kode buka tutup <td> </td> menentukan jumlah KOLOM dari tabel.
Kode buka tutup <td> </td> menentukan jumlah KOLOM dari tabel.
Jadi, misalkan kita ingin membuat tabel 5×4, atau terdiri dari 5 baris dan 4 kolom, maka kode buka tutup <tr> </tr> sebanyak 5 dan kode buka tutup <td> </td> sebanyak 4. Yaitu sebagai berikut:
<table width="300" border="1">
<tr>
<td>Kotak 1 A </td>
<td>Kotak 1 B </td>
<td>Kotak 1 C </td>
<td>Kotak 1 D </td>
</tr>
<tr>
<td>Kotak 2 A </td>
<td>Kotak 2 B </td>
<td>Kotak 2 C </td>
<td>Kotak 2 D </td>
</tr>
<tr>
<td>Kotak 3 A </td>
<td>Kotak 3 B </td>
<td>Kotak 3 C </td>
<td>Kotak 3 D </td>
</tr>
<tr>
<td>Kotak 4 A </td>
<td>Kotak 4 B </td>
<td>Kotak 4 C </td>
<td>Kotak 4 D </td>
</tr>
<tr>
<td>Kotak 5 A </td>
<td>Kotak 5 B </td>
<td>Kotak 5 C </td>
<td>Kotak 5 D </td>
</tr>
</table>
<tr>
<td>Kotak 1 A </td>
<td>Kotak 1 B </td>
<td>Kotak 1 C </td>
<td>Kotak 1 D </td>
</tr>
<tr>
<td>Kotak 2 A </td>
<td>Kotak 2 B </td>
<td>Kotak 2 C </td>
<td>Kotak 2 D </td>
</tr>
<tr>
<td>Kotak 3 A </td>
<td>Kotak 3 B </td>
<td>Kotak 3 C </td>
<td>Kotak 3 D </td>
</tr>
<tr>
<td>Kotak 4 A </td>
<td>Kotak 4 B </td>
<td>Kotak 4 C </td>
<td>Kotak 4 D </td>
</tr>
<tr>
<td>Kotak 5 A </td>
<td>Kotak 5 B </td>
<td>Kotak 5 C </td>
<td>Kotak 5 D </td>
</tr>
</table>
Dan hasilnya:
| Kotak 1 A | Kotak 1 B | Kotak 1 C | Kotak 1 D |
| Kotak 2 A | Kotak 2 B | Kotak 2 C | Kotak 2 D |
| Kotak 3 A | Kotak 3 B | Kotak 3 C | Kotak 3 D |
| Kotak 4 A | Kotak 4 B | Kotak 4 C | Kotak 4 D |
| Kotak 5 A | Kotak 5 B | Kotak 5 C | Kotak 5 D |
Dan bagaima cara untuk menyisipkan baris dalam kolom, atau kolom dalam baris. Agar lebih paham lihat dulu kode HTML berikut:
<table border="1" style="width: 300px;">
<tr>
<td colspan="2">mergecell1</td>
<td>merge1</td>
</tr>
<tr>
<td>merge2a</td>
<td rowspan="2">mergecell2</td>
<td>merge2b</td>
</tr>
<tr>
<td>merge3a</td>
<td>merge3b</td>
</tr>
</table>
<tr>
<td colspan="2">mergecell1</td>
<td>merge1</td>
</tr>
<tr>
<td>merge2a</td>
<td rowspan="2">mergecell2</td>
<td>merge2b</td>
</tr>
<tr>
<td>merge3a</td>
<td>merge3b</td>
</tr>
</table>
Hasilnya adalah:
| mergecell1 | merge1 | |
| merge2a | mergecell2 | merge2b |
| merge3a | merge3b | |
colspan="2" untuk menggabungkan dua buah kolom pada satu baris.
rowspan="2" untuk menggabungkan dua buah baris pada satu kolom.
###SEMOGA BERMAMFAAT###
Belum ada Komentar untuk "CARA MEMBUAT TABEL DI POSTINGAN BLOG | KODE HTML"
Posting Komentar