Cara Membuat Tabel Warna-Warni di Blog
CARA MEMBUAT TABEL WARNA-WARNI DI BLOG — Penulisan artikel di blog adakalanya membutuhkan tabel. Oleh sebab itu dalam artikel ini saya menyimpan data kode untuk membuat tabel dalam postingan di blog. Data ini saya temukan dari berbagai sumber dengan sedikit mengeditnya.
Kode Dasar Tabel 2 Kolom
Kolom 1 Baris 1 Link | Kolom 2 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 |
<table>
<tbody>
<tr>
<td>Kolom 1 Baris 1 <a href="#" rel="nofollow" target="_blank"> Link</a> </td>
<td>Kolom 2 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td>Kolom 1 Baris 1 <a href="#" rel="nofollow" target="_blank"> Link</a> </td>
<td>Kolom 2 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
</tbody>
</table>
Kode Dasar Tabel 3 Kolom
Kolom 1 Baris 1 Link | Kolom 2 Baris 1 | Kolom 3 Baris 1 |
Kolom 1 Baris 2 | Kolom 2 Baris 2 | Kolom 3 Baris 2 |
<table>
<tbody>
<tr>
<td>Kolom 1 Baris 1 <a href="#" rel="nofollow" target="_blank"> Link</a> </td>
<td>Kolom 2 Baris 1</td>
<td>Kolom 3 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
<td>Kolom 3 Baris 2</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td>Kolom 1 Baris 1 <a href="#" rel="nofollow" target="_blank"> Link</a> </td>
<td>Kolom 2 Baris 1</td>
<td>Kolom 3 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
<td>Kolom 3 Baris 2</td>
</tr>
</tbody>
</table>
Kode Dasar Penggunaan Mergecell
mergecell1 | merge1 | |
merge2a | mergecell2 | merge2b |
merge3a | merge3b |
<table>
<tbody>
<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>
</tbody>
</table>
<tbody>
<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>
</tbody>
</table>
Kode Dasar Memberikan Warna Tulisan
Contoh Kolom 1 Baris 1 | Contoh Kolom 2 Baris 1 |
<table>
<tbody>
<tr>
<td style="color:red;">Contoh Kolom 1 Baris 1</td>
<td>Contoh Kolom 2 Baris 1</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td style="color:red;">Contoh Kolom 1 Baris 1</td>
<td>Contoh Kolom 2 Baris 1</td>
</tr>
</tbody>
</table>
Kode Dasar Memberi Warna Background Tabel
Contoh Kolom 1 A | Contoh Kolom 1 B | Contoh Kolom 1 B |
Kolom 2 Baris 1 | Kolom 2 Baris 2 | Kolom 2 Baris 2 |
Kolom 2 Baris 1 | Kolom 2 Baris 2 | Kolom 2 Baris 2 |
Kolom 2 Baris 1 | Kolom 2 Baris 2 | Kolom 2 Baris 2 |
<table>
<tbody>
<tr>
<td style="background-color: hotpink; color: white; text-align: center;">Contoh Kolom 1 A</td>
<td style="background-color: lightblue; color: white; text-align: center;">Contoh Kolom 1 B</td>
<td style="background-color: lightgreen; color: white; text-align: center;">Contoh Kolom 1 B</td>
</tr>
<tr>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 1</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
</tr>
<tr>
<td>Kolom 2 Baris 1</td>
<td>Kolom 2 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
<tr>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 1</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td style="background-color: hotpink; color: white; text-align: center;">Contoh Kolom 1 A</td>
<td style="background-color: lightblue; color: white; text-align: center;">Contoh Kolom 1 B</td>
<td style="background-color: lightgreen; color: white; text-align: center;">Contoh Kolom 1 B</td>
</tr>
<tr>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 1</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
</tr>
<tr>
<td>Kolom 2 Baris 1</td>
<td>Kolom 2 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
<tr>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 1</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
<td style="background-color: #f9f9f9;">Kolom 2 Baris 2</td>
</tr>
</tbody>
</table>