Oke, kali ini Insyaallah saya akan memaparkan seri terakhir dari tutorial HTML, yaitu Dasar-dasar HTML Bagian 3 : Table, Div, dan Span. Just read, try, and learn :)
Table
Table pada HTML sangat berguna. Table digunakan untuk menyimpan data dalam bentuk tabel sehingga data mudah dibaca. Table dalam HTML memiliki opening tag <table> dengan closing tag </table>. Ketika kita ingin menampilkan konten dengan rapi dalam suatu tabel, sudah pasti kita memerlukan baris (row) dan kolom (column). Sebelum membuat tabel secara utuh, kita harus mempelajari tentang table row dan cara membuat column terlebih dahulu.
Table Row
Table Row memiliki tag <tr></tr>. Setiap kali kita membuat tag tersebut, maka sebuah baris baru dalam tabel akan dibuat. Table Row pada HTML merupakan tag yang dibuat terlebih dahulu setelah membuat tag <table>. Dengan kata lain, tag <tr></tr> berada di dalam tag <table></table>. Sehingga formatnya akan seperti berikut :
<table>
<tr></tr>
<tr></tr>
</table>
Table Data
Table Data berisi konten yang akan ditampilkan pada tabel. Table data memiliki tag <td></td>. Pembuatan kolom pada tabel HTML ditentukan oleh banyaknya table data (atau bisa dikatakan cell) pada setiap table row. Dengan kata lain, setiap membuat table data, tag <td></td> ditambahkan ke dalam tag <tr></tr>. Selain itu, setiap table row harus memiliki jumlah table data yang sama untuk membuat kolom yang sempurna. Dengan begitu, tabel yang dibuat memiliki format sebagai berikut : (contoh tabel 2 baris dengan 2 kolom)
<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>
Table Head & Table Body
Setelah mempelajari tentang pembuatan table sederhana dengan membuat baris dan kolom, selanjutnya kita akan mempelajari lebih lanjut mengenai struktur tabel pada HTML agar tabel yang dibuat lebih rapi dan terstruktur.
Seperti struktur HTML, tabel di dalam HTML juga memiliki head dan body. Table Head merupakan cara penulisan judul pada tabel. Bedanya, jika <title> dalam <head> HTML tidak ditampilkan pada halaman HTML, table head ditampilkan pada bagian atas tabel dengan font weight yang berbeda dengan data pada cell lain (mirip perbedaan antara heading dengan paragraf biasa).
Untuk membuat table head, digunakan tag <thead></thead> setelah tag <table>. Setelah itu, untuk membuat baris pada table head, tambahkan <tr></tr> di dalam <thead></thead>. Terakhir, untuk menampilkan data dalam table head, digunakan tag <th></th> sebagai pengganti <td></td>. Dengan begitu, format table head akan menjadi seperti berikut :
<table>
<thead>
<tr>
<th>Judul Tabel Kolom 1</th>
<th>Judul Tabel Kolom 2</th>
</tr>
</thead>
</table>
Table Body merupakan bagian body pada tabel yang berisi data yang akan ditampilkan. Untuk membuat table body, digunakan tag <tbody></tbody> setelah closing tag </thead>. Selebihnya, ditambahkan tag <tr> dan <td> seperti contoh sebelumnya. Dengan begitu, table memiliki struktur yang sempurna seperti pada contoh berikut :
<table>
<thead>
<tr>
<th>Judul Tabel Kolom 1</th>
<th>Judul Tabel Kolom 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Baris 1 Kolom 1</td>
<td>Data Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Data Baris 2 Kolom 1</td>
<td>Data Baris 2 Kolom 2</td>
</tr>
</tbody>
</table>
Colspan
Bagaimana jika kita ingin menyatukan beberapa cell pada tabel seperti fungsi merge pada Excel? Kita dapat menggunakan colspan. Colspan merupakan attribute pada tabel, yang digunakan untuk menggabungkan dua cell atau lebih menjadi satu. Attribute colspan dapat digunakan pada tag <td> dan <th>. Berikut contoh penggunaan colspan, sehingga pada baris 1 hanya terdapat 1 cell, sedangkan pada baris 2 terdapat 2 cell :
<table>
<tr>
<td colspan="2">Baris 1 dengan colspan</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
Style pada Table
Kita telah mempelajari struktur tabel secara keseluruhan. Akan tetapi tabel yang dihasilkan masih terlihat monoton. Untuk itu, kita akan coba membuat tabel lebih terlihat cantik menggunakan styling seperti pada tutorial sebelumnya. Di sini, saya akan kasih contoh kode sebuah halaman HTML yang berisi tabel dengan penambahan style yang mengubah tampilan table border, padding, dan font di dalam tabel. Silakan coba kode berikut, dan coba untuk lebih bereksperimen dengan mengubah value, teks, atau jumlah baris/kolom tabel, atau bahkan menambah style sendiri :
<html>
<head>
<title>Contoh Table</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
Div
Salah satu tag yang akan banyak digunakan selanjutnya yaitu Div, singkatan dari Division (pembagian). Div pada HTML berfungsi untuk membagi halaman HTML menjadi container atau potongan-potongan berbeda. Div sangat fleksibel karena dapat digabungkan dengan style, dapat diisi dengan konten seperti teks dan gambar, juga dapat ditambahkan link pada div. Nantinya, div akan banyak digunakan saat mempelajari CSS. Karena dengan div, pembentukan tampilan sebuah halaman HTML akan menjadi lebih mudah. Untuk membuat div, digunakan tag <div></div>. Untuk dapat memahami lebih lanjut mengenai div, dapat dicoba kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Div</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<a href="http://www.google.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>
Span
Jika div membagi halaman HTML menjadi beberapa potongan berbeda dengan style berbeda, Span dapat mengontrol style pada bagian yang lebih kecil lagi seperti teks. Span menggunakan tag <span></span>. Sebagai contoh, jika kita ingin mengubah kata komputer menjadi warna merah pada kalimat Saya suka belajar komputer, maka tinggal ditambahkan span diantara kata komputer. Sehingga menjadi seperti berikut : Saya suka belajar <span style="color: red">komputer</span>
Coba kode berikut untuk lebih memahami span :
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<p>My favorite font is <span style="font-family: Impact">Impact</span>!</p>
</body>
</html>
Sekian tutorial Dasar-dasar HTML dari saya, terimakasih sudah mau membaca tutorial ini. Semoga tutorial ini dapat bermanfaat buat temen-temen semua.
Tutorial Sebelumnya : Dasar-dasar HTML Bagian 2
