Silakan buka entri baru, kemudian klik pada bab HTML disebelah Compose.
Selanjutnya ketikan instruksi berikut ini.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Setelah itu klik bab Compose, Maka kesannya akan menjadi menyerupai ini. <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
1 | 2 | 3 |
Selanjutnya menciptakan tabel 2 baris
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Hasilnya <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
1 | 2 | 3 |
4 | 5 | 6 |
Dari tumpuan diatas, kita sanggup melihat bahwa instruksi tr dipakai untuk menciptakan tabel ke bawah, sedangkan instruksi td dipakai untuk tabel kesamping. Kaprikornus jikalau ingin menambahkan jumlah tabel, silakan tambahkan instruksi tr dan instruksi td sesuai dengan keinginan.
Selanjutnya menciptakan Tabel dengan warna background, lebar tabel serta warna goresan pena dengan cara menambahkan instruksi bgcolor="red" border="1" style="color: white; width: 400px;" pada bab <table>. Contoh:
<table bgcolor="red" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Hasilnya <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
1 | 2 | 3 |
4 | 5 | 6 |
Sekarang kita coba memakai tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan instruksi <th>Judul</th> Contoh:
<table bgcolor="red" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
Hasilnya <tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
No | Nama | Kelas |
---|---|---|
1 | Fandra Juani | 3 |
2 | Juani Fandra | 6 |
Bisa juga dengan memakai background yang berbeda. Contoh:
<table bgcolor="white" border="1" style="color: black;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
Hasilnya<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>
No | Nama | Kelas |
---|---|---|
1 | Fandra Juani | 3 |
2 | Juani Fandra | 6 |
Untuk mengatur posisi goresan pena kau sanggup gunakan Tool Alignment yang ada dipilihan tool pada ketika kita menulis di entri. Sebenarnya masih banyak instruksi dengan fungsi lain yang sanggup dipakai untuk menciptakan tabel diblog, insyaallah nanti akan aku coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga sanggup bermanfaat untuk anda.
0 comments:
Post a Comment