Cara Membuat Tabel HTML

Tuesday, July 23rd 2013. | Tutorial
Cara Membuat Tabel HTML di Blogger dan Wordpress

Cara Membuat Tabel HTML di Blogger dan Wordpress

advertisement

Cara Membuat Tabel HTML – Tabel adalah list atau daftar data juga informasi yang ditampilkan berbentuk deret kolom dan baris sehingga dapat difahami dengan mudah. Tabel berisi data biasanya berupa text dan angka yang tersusun secara sistematis sesuai kebutuhan pengguna. Pada dunia blog fungsi tabel sering digunakan untuk menampilkan informasi kepada pembaca. Masalahnya adalah kebanyakan text editor yang ada pada aplikasi website menuntut kita untuk membuat tabel secara manual, dalam artian kita harus membuat tabel dengan menuliskan kode HTML-nya. Cara membuat tabel dengan bahasa HTML mudah saja, hanya cukup memahami sedikit bahasa HTML. Membuat tabel HTML sendiri memiliki keunggulan kita bisa mendesain sedekian rupa supaya tabel terlihat cantik. Selain untuk menampilkan data dan informasi pada artikel di blog, tabel dahulu berperan sangat penting dalam pembuatan struktur website. Tabel saat itu dibuat untuk mengatur tata letak header, main content, sidebar, footer. Membuat tabel untuk kebutuhan pengaturan struktur website saat ini tidaklah sepenting dahulu, karena peran tersebut sekarang sudah terwakili oleh CSS yang notabene penggunaannya lebih mudah dan dinamis ketimbang menggunakan tabel HTML.

Cara Membuat Tabel HTML sangat Mudah

Persiapan Membuat Tabel HTML

Oke langsung saja kita ke inti dari artikel ini yaitu cara membuat tabel html. Sebelum praktek membuat tabel html terlebih dahulu kita persiapkan alat-alatnya. Yang dibutuhkan untuk membuat tabel html adalah text editor bisa notepad, notepad++ atau text editor lain yang sering anda gunakan.

Mengenal Struktur Tabel HTML

Tabel dalam HTML ditandai dengan kode <tabel> dan diakhir dengan </tabel>. Untuk membuat baris di dalam tabel menggunakan kode <tr> (tr singkatan table row), dan pada setiap baris mesti memiliki kolom-kolom, untuk membuat kolom menggunakan kode <td> (td singkatan table data). Data yang ada pada kolom bisa berupa text, angka, gambar, link. Berikut struktur lengkap Tabel HTML:

<table>
<tr>
<td></td>
</tr>
</table>

Contoh Membuat Tabel Data Mahasiswa

Masukkan kode berikut ke notepad anda:

<table border=”1″>
<tr>
<td>No</td>
<td>Nama Mahasiswa</td>
<td>Alamat</td>
<td>Sementer</td>
</tr>
<tr>
<td>1</td>
<td>Sarip Usman</td>
<td>Tasikmalaya</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>Andi Firmansyah</td>
<td>Bandung</td>
<td>6</td>
</tr>
</table>

Kemudian save dan beri nama tabel.html Save as Type-nya pilih All Files. Buka tabel.html menggunakan firefox/internet explorer, akan tampil seperti di bawah ini:

No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8
1 Andi Firmansyah Bandung 6

Cara Membuat Tabel HTML memakai Atribut

Untuk mendesain tabel supaya bisa terlihat cantik memerlukan atribut tambahan yang bekerja pada tag <table>. Berikut atribut tag tabel yang diperlukan:

  • Tabel Header

Tabel header digunakan untuk membedakan data header dan data konten pada tabel. Tabel header menggunakan tag <th>, berikut contohnya:

<table border=”1″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Sementer</th>
</tr>
<tr>
<td>1</td>
<td>Sarip Usman</td>
<td>Tasikmalaya</td>
<td>8</td>
</tr>
</table>

Hasil:

No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8
  • Tabel Caption

Table Caption berfungsi untuk memberikan penamaan pada tabel. Didefinisikan dengan tag <caption>. Contoh penggunaan, tambahan kode <caption>Tabel Mahasiswa</caption> di bawah tag <table>. Hasilnya menjadi:

Tabel Mahasiswa
No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8
  • Penggabungan Kolom dan Baris

Menggabungkan beberapa kolom menjadi satu kolom menggunakan atribut colspan , sedangkan untuk menggabungkan baris menggunakan atribut rowspan. Contoh penggunaan:

Penggunaan Atribut colspan:

<table border=”1″>
<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>

Hasil:

Gabungan Kolom 1 dan 2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Penggunaan Atribut rowspan:

<table border=”1″>
<tr>
<td 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>

Hasil:

Gabungan Baris 1 dan 2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2
  • Pengaturan Jarak pada kolom

Pengaturan jarak antara text dengan kolom tabel menggunakan cellpadding dan cellspacing. celpadding berarti mengatur jarak dari sisi bagian dalam kolom, sedangkan cellspacing mengatur jarak dari sisi bagian luar kolom. Contoh penggunaan:

Atribut cellpadding:

<table border=”1″ celpadding=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Sementer</th>
</tr>
<tr>
<td>1</td>
<td>Sarip Usman</td>
<td>Tasikmalaya</td>
<td>8</td>
</tr>
</table>

Hasil:

No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8

Atribut cellspacing:

<table border=”1″ cellspacing=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Sementer</th>
</tr>
<tr>
<td>1</td>
<td>Sarip Usman</td>
<td>Tasikmalaya</td>
<td>8</td>
</tr>
</table>

Hasil:

No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8
  • Tabel Background

Untuk memperindah tampilan tabel salah satunya dengan mengatur warna dari tabel. Berikut contoh pengaturan warna pada tabel:

<table border=”1″ celpadding=”10″ style=”background:#eee;”>
<tr style=”background:red;”>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Sementer</th>
</tr>
<tr>
<td>1</td>
<td>Sarip Usman</td>
<td>Tasikmalaya</td>
<td>8</td>
</tr>
</table>

Hasil:

No Nama Mahasiswa Alamat Sementer
1 Sarip Usman Tasikmalaya 8

Demikianlah tutorial singkat mengenai cara membuat tabel HTML beserta atribut yang bisa dipakainya untuk mempercantik tampilan tabel. Tutorial cara membuat tabel menggunakan HTML ini untuk tingkat dasar, silakan pelajari lebih lanjut bahasa HTML lainnya.

Cara Membuat Tabel HTML

tags: ,

Komentari Cara Membuat Tabel HTML