Cara Membuat dan Mempercantik Table HTML

CARA MEMBUAT TABLE
Setelah kemarin kita membahas tentang Cara Menampilkan Gambar Pada HTML, maka pada kesempatan kali ini BlogReOt akan mengulas bagaimana caranya membuat table pada HTML dan mempercantik tampilannya menggunakan atribut style. Tutorial ini hanyalah sebagai catatan buat saya sendiri dan mudah-mudahan juga bisa menjadi sebuah referensi untuk para pemula yang sedang belajar HTML.
Apa itu tabel (table)??
Tabel merupakan kumpulan data-data terstruktur yang disusun dalam beberapa kolom dan baris. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu loading website, dalam pengelolaan dan pengeditannya pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan didalamnya.

Saat ini table sangat banyak sekali digunakan oleh web designer dan para blogger untuk memperindah tampilan data pada web ataupun postingan blog, table yang cantik otomatis akan membuat para pembaca merasa nyaman karna data yang disajikan disusun dengan rapi. Bagaimana caranya membuat table dan mempercantik tampilannya? simak ulasannya berikut.
1. Cara membuat table
Bagaimana caranya membuat table (tabel)?
Ada 3 elemen utama untuk membuat sebuah table yang sederhana, yaitu: <table> , <tr> dan <td>,
  • tag <table>
    Adalah tag pembuka untuk membuat sebuah table. Setiap tag <table> harus diakhiri dengan tag penutup </table>
  • tag <tr>
    Yang merupakan singkatan dari table rows, berfungsi untuk membuat baris dalam table. Setiap tag <tr> harus diakhiri dengan tag </tr>
  • tag <td>
    Yang merupakan singkatan dari table data, berfungsi untuk membuat kolom dalam table. Kemudian dilanjutkan dengan table cell atau data yang akan ditampilkan. Setiap tag <td> harus diakhiri dengan tag </td>
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Hasilnya:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Pada contoh diatas sengaja ditambahkan atribut border="1" supaya memudahkan dalam membedakan antara kolom dan baris karena secara default setiap nilai border adalah 0. Untuk merpertebal bordernya silahkan tambahkan nilainya menjadi 2 atau 3.

2. Mengubah warna border
Untuk mengubah warna border pada table kita akan menggunakan atribut:
style="border-color:#kode warna"
Berikut adalah contoh table dengan border berwarna merah:
<table border="1">
<tr>
<td style="border-color:#F70000;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Hasilnya:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Kode #F70000 pada contoh diatas adalah kode warna HTML, Untuk melihat kode warna lainnya silahkan menuju Kode Warna HTML Lengkap (color chart).

3. Mengatur lebar dan tinggi tabel
Untuk mengatur lebar table kita menggunakan atribut width. Sedangkan untuk mengatur lebar dan tinggi td kita akan menggunakan atribut style dengan properti width untuk lebar dan height untuk tinggi.
Berikut adalah contoh tabel dengan lebar 100% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px:
<table border="1" width="100%">
<tr>
<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Hasilnya:
Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Satuan ukuran width dan height dari atribut maupun style tersebut kita dapat menggunakannya dalam pixel (px) atau persentase (%). Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama karena secara otomatis kolom-kolom berikutnya akan mengikuti aturan tersebut dengan sendirinya.

4. Menggabungkan kolom/baris pada tabel
Setiap kolom ataupun baris dari sebuah tabel dapat kita gabungkan sesuai dengan kebutuhan bentuk tabel yang sobat inginkan.
Untuk menggabungkan antar kolom dalam tabel kita akan menggunakan atribut colspan.
<table border="1" width="100%">
<tr>
<td colspan="2">Gabungan Kolom 1 dan 2 pada Baris 1</td>
</tr>
<tr>
<td style="width:50%">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Hasilnya:
Gabungan Kolom 1 dan 2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
Sedangkan untuk menggabungkan baris dalam tabel kita akan menggunakan atribut rowspan.
<table border="1" width="100%">
<tr>
<td style="width:50%" rowspan="2">Gabungan Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Hasilnya:
Gabungan Baris 1 dan 2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

5. Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell didalam sebuah tabel, kita akan menggunakan atribut cellpadding dan cellspacing.

Atribut cellpadding adalah untuk mengatur sisi dari bagian dalam cell. Contoh:
<table border="1" width="100%" cellpadding="8">
<tr>
<td style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Hasilnya:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Sedangkan atribut cellspacing adalah untuk mengatur sisi dari bagian luar cell. Contoh:
<table border="1" width="100%" cellspacing="8">
<tr>
<td style="width:50%">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Hasilnya:
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

6. Membuat titel (judul) pada tabel
Untuk tabel yang lengkap dengan titel atau judul, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti atribut td dengan th (table heading) sebagai titel dari baris maupun kolom.
Setiap caption dan th secara otomatis akan berada pada posisi tengah dan value th akan menghasilkan tulisan tebal. Contoh penggunaan tag caption dan atribut th:
<table border="1" width="100%">
<caption>Disini adalah titel (judul) tabel ini</caption>
<tr>
<th style="width:50%;">Header Kolom 1</th>
<th>Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Hasilnya:
Disini adalah titel (judul) tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

7. Mengganti warna background pada tabel
Untuk mengganti warna background pada tabel sama halnya dengan mengganti warna border seperti pada poin diatas yaitu dengan menggunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna biru muda dengan heading warna biru.
<table style="background:#CEDEF4" width="100%" border="1">
<tr>
<th style="background:#2966B8;width:50%;">Header Kolom 1</th>
<th style="background:#2966B8;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Hasilnya:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2
Untuk mengetahui kode warna yang lain silahkan baca Kode Warna HTML Lengkap (color chart).

Itulah sedikit coretan mengenai table HTML, silahkan mencobanya pada postingan blog sobat atau bisa langsung mencobanya disini Tool HTML/JavaScript Checker. Sementara itu kolom komentar selalu terbuka bagi sobat yang ingin menambahkan. Salam...

Sign up here with your email address to receive updates from this blog in your inbox.

0 Response to "Cara Membuat dan Mempercantik Table HTML"

Post a Comment

Kata-kata dan bahasa anda adalah gambaran kualitas diri anda...