Cara Membuat Tabel Dengan HTML

Pada postingan sebelumnya, saya sudah menjelaskan apa untungnya menjadi seorang programmer. Artikelnya bisa Anda baca di Keuntungan Menjadi Programmer. Nah, pada kesempatan kali ini, saya akan bahas mengenai Cara Membuat Tabel Dengan HTML.

Tabel sangat diperlukan jika kita ingin menampilkan data yang berbentuk kolom-kolom. Oleh karena itu, jika kita ingin membuat tabel di website, maka kita harus membuatnya menggunakan bahasa pemrograman HTML.

Contoh tabel pada web browser

Cara membuat tabel.
Untuk membuat tabel yang sederhana ada tiga elemen utama, yaitu table, tr dan td. Tag <table> adalah digunakan untuk membuat tabel, kemudian diikuti dengan tag <tr> (table rows) adalah digunakan untuk membuat baris pada tabel, dan tag <td> (table data) adalah digunakan untuk membuat kolom pada tabel.

Berikut ini adalah contoh tabel yang terdiri dari 3 baris 2 kolom.

<table border="1">
<tr>
<td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Cell 3 - Baris 2 Kolom 1</td>
<td>Cell 4 - Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Cell 5 - Baris 3 Kolom 1</td>
<td>Cell 6 - Baris 3 Kolom 2</td>
</tr>
</table>

Hasilnya akan nampak seperti ini:

Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2

Dalam contoh di atas sengaja ditambah atribut border agar kita dapat melihat posisi pada tabel tersebut, karena secara default, nilai dari border ini adalah 0 jika tidak disertakan dengan menggunakan tag <table>

Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti widht. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut ini adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
<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

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
<tr>
<td colspan="2">Gabungan Kolom 1&amp;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&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 menggunakan atribut rowspan.

<table border="1" width="75%">
<tr>
<td style="width:50%" rowspan="2">Gabungan Baris 1&amp;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&2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Mengatur jarak kolom pada tabel.
Untuk mengatur jarak posisi pasa cell dalam tabel digunakan atribut cellpedding dan cellspacing.

Cellpedding adalah digunakan untuk mengatur sisi pada bagian dalam cell.

<table border="1" width="75%" 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 cellspacing adalah digunakan untuk mengatur sisi bagian luar.

<table border="1" width="75%" 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

Membuat judul pada tabel.
Untuk mebuat judul dalam tabel kita bisa menggunakan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel.

<table border="1" width="75%">
<caption>Disini adalah titel 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 tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Membuat background pada tabel.
Untuk membuat background pada tabel kita bisa menggunakan atribu style dengan properti background.

Berikut ini adalah contoh tabel dengan background warna kuning muda dan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">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

Nah itulah dia cara-cara membuat tabel dengan HTML. Cukup sekian artikel kali ini. Saya mohon maaf jika ada penulisan dan tutur kata yang salah. Semoga bisa bermanfaat. Terima kasih 🙂

Banyak berbagi Banyak Rezeki :)

Leave a Reply

Your email address will not be published. Required fields are marked *