Kali ini saya akan kembali membahas seputar Website yaitu Bagaimana Cara Membuat Tabel di HTML dengan benar.
Sebelum sobat mengikuti tutorial kali ini, saya sarankan sobat membaca 2 artikel berikut ini terlebih dahulu :
Jika sobat merasa sudah mengerti atau sudah mengetahui, itu bagus. Oke kalau begitu langsung saja kita mulai prakteknya.
Bagaimana Cara Membuat Table pada HTML?
HTML sudah menyediakan banyak Tag. Jika sobat sudah membaca artikel saya yang ini Tag-tag HTML, pasti agan melihat ada tag<table>.
Ya..., kita membutuhkan tag
<table> untuk membuat tabel, namun masih belum cukup. Masih kurang 2 tag lagi yang dibutuhkan untuk membuat tabel.
Tabel terdiri atas Baris dan Kolom. Itu artinya kita perlu tag untuk membuat baris dan kolom untuk membuat tabel.
Untuk membuat baris didalam table menggunakan HTML kita bisa menggunakan tag
<tr> dan di dalam tag baris tersebut kita bisa menambahkan data atau kolom tabelnya dengan tag <td>.
Contoh Penulisan Kode HTML untuk Membuat Tabel
Berikut ini contoh dasar pembuatan tabel dalam HTML :<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel HTML</title>
</head>
<body>
<table>
<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>
</body>
</html>
 |
| Gambar 1 Tampilan Tabel Standar |
... Sampai sini paham?
Selain
<table>, <tr>, dan <td>. Masih ada tag lainnya yang bisa digunakan untuk membuat tabel. Bisa dilihat tag-tag beserta fungsinya dengan lengkap pada tabel berikut ini.
| Nama Tag | Keterangan | Fungsi |
|---|---|---|
<table> | Table | Tag untuk membungkus tabelnya. |
<tr> | Table Row | Tag untuk membuat baris. |
<td> | Table Data | Tag untuk membuat data pada table yang akan membentuk kolom. |
<th> | Table Heading | Tag untuk membuat judul pada header tabel. (opsional) |
<thead> | Table Header | Tag untuk membungkus bagian header tabel. (opsional) |
<tbody> | Table Body | Tag untuk membungkus bagian body tabel. (opsional) |
<tfoot> | Table Footer | Tag untuk membungkus bagian footer tabel. |
Menambahkan Garis atau Border pada Tabel
Untuk menambahkan garis luar atau border pada tabelnya kita bisa menggunakan atributborder.
Perhatikan contoh berikut ini.
<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>
</table>
"1" pada atribut border. Semakin besar nilainya, maka akan semakin besar juga ukuran bordernya.
Hasilnya :
 |
| Gambar 2 Menambahkan Table Border |
Mengatur Jarak Dalam Sel atau Cellpadding pada Tabel
Mengatur jarak sel pada tabel sangat penting. Karena akan sangat tidak enak dilihat kalau data yang kita tampilkan itu saling berdempetan.Kita bisa memberi jarak pada setiap sel dengan menggunakan atribut
cellpadding.
Sama seperti atribut border jika nilai cellpaddingnya semakin besar, maka akan semakin luas juga jarak setiap selnya.
Contoh Penggunaan Cellpadding:
<table border="1" cellpadding="10">
<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:
 |
| Gambar 3 Memberi Cellpadding |
Memberi Warna Background pada Sel
Agar tablenya tidak terlalu polos. tabel bisa diberi warna langsung dari tagnya menggunakan atribut khusus atau bisa juga menggunakan css.Mungkin di lain kesempatan akan saya buatkan artikel khusus untuk mendesain tabel.
Untuk kali ini saya hanya akan memberikan contoh pemberian warnanya langsung pada tagnya menggunakan atribut
bgcolor.
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, Kolom 1</td>
<td bgcolor="#efefef">Baris 1, Kolom 2</td>
</tr>
<tr bgcolor="lightblue">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
 |
| Gambar 4 Memberi Warna pada Cell |
Menggabungkan Sel atau Merge Cell pada Tabel
Merge Cell merupakan 1 fungsi yang sering kita gunakan pada saat mendesain tabel di word maupun excel.Sama seperti di aplikasi office, html juga sudah menyediakan fungsi merge cell pada tabel dengan menggunakan atribut
rowspan untuk menggabungkan baris, serta colspan untuk menggabungkan kolom.
<table cellpadding="5" border="1">
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Nama</th>
<th colspan="5" align="center">Nilai</th>
</tr>
<tr>
<th>Absen</th>
<th>Tugas</th>
<th>UTS</th>
<th>UAS</th>
<th>Rata-rata</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Arfan</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10.0</td>
</tr>
</tbody>
</table>  |
| Gambar 5 Menggabungkan Cell |
Keterangan:
- Pada kolom "No." dan "Nama" saya menggunakan
rowspan="2". Artinya saya menggabungkan 2 baris kebawah. Hasilnya baris ke-1 dan ke-2 digabung. - Pada kolom "Nilai" saya menggunakan
colspan="5"untuk menggabungkan 5 kolom ke kanan. hasilnya kolom ke-3 sampai ke-7 digabung.
Bagaimana? paham?
Bagian tersulit mungkin ada di bagian terakhir yakni penggabungan cell. Jika sobat sering berlatih, saya yakin sobat pasti bisa membuat tabel ini dengan mudah, seperti membuat tabel pada aplikasi office.
Oke mungkin cukup sekian untuk artikel kali ini, semoga bermanfaat. Jika masih belum paham silahkan tanyakan di kolom komentar, terima kasih.