Cara Membuat Tabel di Postingan (Tahap 2)

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Cara Membuat Table Tahap 2 Sebelemnya saya sudah menulis tentang cara membuat Tabel (Tahap 1). Bila anda belum sempat melihat atau belum membaca artikelnya,silahkan anda bisa Klik

DISINI. Kali ini saya akan melanjutkan memberikan beberapa contoh lagi cara membuat tabel serta perbedaan cara penulisannya. Langsung saja silahkan perhatikan perbedaan contoh-contoh berikut ini : 1. Tabel tanpa border atau batas dan tabel dengan border

• Tabel tanpa border

<table>

<tr>

  <td>Tabel tanpa border</td>

  <td>Tabel tanpa border</td>

  <td>Tabel tanpa border</td>

</tr>

<tr>

  <td>Tabel tanpa border</td>

  <td>Tabel tanpa border</td>

  <td>Tabel tanpa border</td>

</tr>

</table>

Berikut hasilnya :

Tabel tanpa border	Tabel tanpa border	Tabel tanpa border
Tabel tanpa border	Tabel tanpa border	Tabel tanpa border

Tabel tanpa borderTabel tanpa borderTabel tanpa border

• Tabel dengan border

<table border="1">

<tr>

  <td>Dengan border</td>

  <td>Dengan border</td>

  <td>Dengan border</td>

</tr>

<tr>

<td>Dengan border</td>

</tr>

</table>

Berikut hasilnya :

Dengan border	Dengan border	Dengan border
Dengan border

Dengan border

Catatan : Nilai border '0' sama dengan tanpa border

2. Tabel header atau Judul

• Judul diatas

<table border="1">

<tr>

  <th>Nama</th>

  <th>Alamat</th>

  <th>Telephone</th>

</tr>

<tr>

  <td>Siti Mariam</td>

  <td>Jogja</td>

  <td>555 77 855</td>

</tr>

</table>

Berikut hasilnya :

Nama	Alamat	Telephone
Siti Mariam	Jogja	555 77 855

• Judul disamping

<table border="1">

 <tr>

<th>Nama :</th> 

<td>Siti Mariam</td></tr>

<tr>
  <th>Alamat :</th>
 

<td>Jogja</td>
</tr>

<tr>
  <th>Telephone :</th>
 

<td>555 77 855</td>
</tr>

</table>
Berikut hasilnya :

Nama :	Siti Mariam
Alamat :	Jogja
Telephone :	555 77 855

3. Tabel Header dan keterangan

<table border="1">

  <caption>Pendapatan bulanan :</caption>

  <tr>

    <th>Bulan</th>

    <th>Hasil</th>

  </tr>

  <tr>

    <td>Januari</td>

    <td>Rp.4000.000,-</td>

  </tr>

  <tr>

    <td>Februari</td>

    <td>Rp.5000.000,-</td>

  </tr>

</table>

Berikut hasilnya :

Pendapatan bulanan :

Bulan	Hasil
Januari	Rp.4000.000,-
Februari	Rp.5000.000,-

4. Tabel dengan sel-sel yang lebih dari satu baris / kolom

• Sel yang mencakup dua kolom:Sel yang mencakup dua kolom:

<table border="1">

<tr>

  <th>Nama</th>

  <th colspan="2">Telephone</th>

</tr>

<tr>

  <td>Siti Mariam</td>

  <td>000 000 001</td>

  <td>000 000 002</td>

</tr>

</table>

Berikut hasilnya :

Nama	Telephone
Siti Mariam	000 000 001	000 000 002

• Sel yang mencakup dua baris:

<table border="1">

<tr>

  <th>Nama :</th>

  <td>Siti Mariam</td>

</tr>

<tr>

  <th rowspan="2">Telephone:</th>

  <td>000 000 001</td>

</tr>

<tr>

  <td>000 000 002</td>

</tr>

</table>

Berikut hasilnya :

Nama :	Siti Mariam
Telephone:	000 000 001
	000 000 002

5. Tag di dalam tabel 

Bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.

<table border="1"><tbody>

<tr>

<td>Hewan kesukaan :

<ul>

<li>Kucing</li>

<li>Burung</li>

<li>Kelinci</li>

<li>Kuda</li>

</ul>

</td>

<td>

<table border="1">

<tbody>

<tr>

<td>Gambar 1</td>

<td>Gambar 2</td>

</tr>

<tr>

<td>Gambar 3</td>

<td>Gambar 4</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td>Teks</td>

<td>Teks</td>

</tr>

</tbody>

</table>  

Berikut hasilnya :

Hewan kesukaan : Kucing Burung Kelinci Kuda	Gambar 1 Gambar 2 Gambar 3 Gambar 4
Teks	Teks

6. Cell padding 

Cellpadding berfungsi agar teks atau gambar tidak terlalu dekat dengan garis pada tabel.

<table border="1" 

cellpadding="10">

<tr>

  <td>Teks</td>

  <td>Teks</td>

</tr>  

<tr>

  <td>Teks</td>

  <td>Teks</td>

</tr>

</table>

Berikut hasilnya : Sel 6

Teks	Teks
Teks	Teks

7. Cell jarak 

Cara menggunakan cellspacing untuk meningkatkan jarak antara sel.

<table border="1" 

cellspacing="10">

<tr>

  <td>Teks</td>

  <td>Teks</td>

</tr>  

<tr>

  <td>Teks</td>

  <td>Teks</td>

</tr>

</table>

Berikut hasilnya :

Teks	Teks
Teks	Teks

Selamat mencoba dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentarnya......terima kasih.

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

author; Rachmat Machmud. Flimban

Anda Sedang membaca artikel yang berjudul Cara Membuat Tabel di Postingan (Tahap 2) Silahkan baca artikel dari PERUM DUTA ASRI PALEM3 Tentang tutorial Yang lainnya. Dan Ingin Mengeprint klik tombol prin di Bawah, atau bookmark halaman ini dengan URL : https://struktur-sosial.blogspot.com/2020/03/cara-membuat-tabel-di-postingan-tahap-2.html