Cara Membuat Tabel di Posting Blog
1. Membuat Tabel
Untuk membuat table biasanya ada 3 elemen utama yang mesti diketahui yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 3 kolom dengan default border :
<table border="1">
<tr>
<td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td>
<td>Cell 3 - Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Cell 4 - Baris 2 Kolom 1</td>
<td>Cell 5 - Baris 2 Kolom 2</td>
<td>Cell 6 - Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Cell 7 - Baris 3 Kolom 1</td>
<td>Cell 8 - Baris 3 Kolom 2</td>
<td>Cell 9 - Baris 3 Kolom 3</td>
</tr>
</table>Hasilnya adalah seperti berikut :
| Cell 1 - Baris 1 Kolom 1 | Cell 2 - Baris 1 Kolom 2 | Cell 3 - Baris 1 Kolom 3 |
| Cell 4 - Baris 2 Kolom 1 | Cell 5 - Baris 2 Kolom 2 | Cell 6 - Baris 2 Kolom 3 |
| Cell 7 - Baris 3 Kolom 1 | Cell 8 - Baris 3 Kolom 2 | Cell 9 - Baris 3 Kolom 3 |
Untuk pembuatan kolom baru, kolom 4 dst hanya tinggal menambahkan kode <td>Cell 3 - Baris 1 Kolom 3</td> sebelum penutup </tr>, begitu juga untuk menambahkan baris baru agan/i tinggal menambahkan kode <tr> ... </tr> beserta isinya sebelum penutup </table>
2. Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar dan tinggi table digunakan atribut width dan height atau bisa juga dengan style CSS. Mengatur lebar dan tinggi tabel sangat penting terutama agar bisa disesuaikan dengan post dan isi blog. Satuan width dan height bisa digunakan dalam persentase 0-100% maupun dengan pixel.
Berikut adalah contoh tabel dengan lebar 80% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 50px.
Berikut adalah contoh tabel dengan lebar 80% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 50px.
<table border="1" width="80%">
<tr>
<td style="width:50%; height:50px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>Hasilnya adalah seperti berikut :
| Baris 1 Kolom 1 | Baris 1 Kolom 2 | Baris 1 Kolom 3 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 | Baris 2 Kolom 3 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 | Baris 3 Kolom 3 |
Seperti terlihat diatas, terlihat bukan bedanya, untuk pengaturan baris/kolom ke 2 dst, cukup menambahkan style="width:50%; heght:50px;" didalam kurung <td>
3. Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom tersebut didalam tabel digunakan atribut colspan atau rowspan untuk baris.
<table border="1" width="80%">
<tr>
<td colspan="3">Gabung Baris 1 & Kolom 1-3</td>
</tr>
<tr>
<td rowspan="2">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>Hasilnya adalah seperti berikut :
| Gabung Baris 1 & Kolom 1-3 | ||
| Baris 2 Kolom 1 | Baris 2 Kolom 2 | Baris 2 Kolom 3 |
| Baris 3 Kolom 2 | Baris 3 Kolom 3 | |
Seperti yang terlihat diatas kode cosplan="3" mampu menggabungkan 3 kolom sekaligus dari kolom 1-3, dan kode rowspan="2" mampu menggabungkan 2 baris sesudah baris 2 yaitu dengan baris ke 3.
4. Mengatur jarak pada tabel bagian dalam dan luar
Setelah otak atik diatas pasti ada yang terlihat kurang rapih kan, nah kemungkinan posisi text yang kurang gimana gitu. Yap untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell, sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.
<table border="1" width="80%" cellpadding="10" cellspacing="10">
<tr>
<td style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>Hasilnya adalah seperti berikut :
| Baris 1 Kolom 1 | Baris 1 Kolom 2 | Baris 1 Kolom 3 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 | Baris 2 Kolom 3 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 | Baris 3 Kolom 3 |
Seperti yang terlihat diatas kode cellpading="10" mampu mengatur jarak dari bagian dalam posisi text, perhatikan posisi text dari atas, kanan, bawah, kiri akan diberi celah 10px untuk jarak masing". Begitu juga dengan cellspacing="10" akan terlihat jarak antar masing" kolom maupun baris dengan garis tebal berjarak 10px. Terlihat kan bedanya?
6. Membuat background pada tabel beserta Judul
Yang terakhir biar terlihat jelas, dan menarik pastikan tabel diberi judul dan background. Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
<table border="1" cellpadding="10" cellspacing="10" style="background:#ffc">
<th style="background:#860000;width:50%;">Judul Kolom 1</th>
<th style="background:#860000;">Judul Kolom 2</th>
<th style="background:#860000;">Judul Kolom 3</th>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>Hasilnya adalah seperti berikut :
| Judul Kolom 1 | Judul Kolom 2 | Judul Kolom 3 |
|---|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 | Baris 1 Kolom 3 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 | Baris 2 Kolom 3 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 | Baris 3 Kolom 3 |
Seperti yang terlihat diatas kode style="background:#ffc" bisa merubah warna dasar background menjadi putih cat kuning, dan style="background:#860000" bisa merubah warna dasar Judul menjadi merah tua. Untuk kode penambahan judul cukup menambahkan <th>Judul Kolom 1</th> begitu juga dengan judul kolom ke 2 dst.
Gimana agan/i semua cukup jelas kan? ok sekian artikel Cara Membuat Tabel di Posting Blog sekiranya bisa bermanfaat bagi semua ya, selamat berkreasi, dan jangan lupa komentar jika ada pertanyaan, terima kasih.
Gimana agan/i semua cukup jelas kan? ok sekian artikel Cara Membuat Tabel di Posting Blog sekiranya bisa bermanfaat bagi semua ya, selamat berkreasi, dan jangan lupa komentar jika ada pertanyaan, terima kasih.
Post a Comment