Biasanya tabel digunakan untuk membuat sebuah penjelasan yang membutuhkan detail lebih jelas.
Namun, masih banyak lagi fungsi tabel pada halaman website yang tidak kami sebutkan di tutorial kali ini.
Format dan Sintaks untuk Membuat Tabel
Pada umumnya, untuk membuat suatu tabel digunakan tag <table>Tag <table> mempunyai tag turunan, yaitu:
- <tr> - yang berfungsi untuk membuat suatu baris pada tabel.
- <td> - yang berfungsi untuk membuat suatu kolom pada tabel.
- <th> - yang berfungsi sebagai kolom header atau judul pada tabel.
Contoh:
Buka teks editor kesayangan Anda, lalu ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel Pada HTML</title>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Ananda Nisa</td>
<td>Perempuan</td>
</tr>
<tr>
<td>2</td>
<td>Ahmad Khalis</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>3</td>
<td>Zailani</td>
<td>Laki-laki</td>
</tr>
</table>
</body>
</html>Simpan dengan nama table.html dan letakan di document pada komputer Anda.
Setelah selesai, silahkan buka file tersebut baik dengan mode chrome, firefox atau internet explore sebagai web browsernya.
Jika benar, maka akan tampil seperti ini:
Menambah Atribut Border pada Tabel
Secara default, table memang tidak memiliki border, akan tetapi Anda bisa membuat bordernya dengan menambahkan atribut border.Anda bisa memberikan garis pada tabel dengan menambahkan atribut border beserta valuenya.
Contoh:
Buka kembali table.html di teks editor kesayangan Anda, lalu ubah scriptnya menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel Pada HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Ananda Nisa</td>
<td>Perempuan</td>
</tr>
<tr>
<td>2</td>
<td>Ahmad Khalis</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>3</td>
<td>Zailani</td>
<td>Laki-laki</td>
</tr>
</table>
</body>
</html>Hasil:
Menambah Atribut Colspan Pada Table
Pada tabel, Anda juga bisa membuat sebuah kolom dalam tabel merentang (span) ke dalam beberapa kolom.Untuk membuat tabel merentang, Anda bisa gunakan atribut colspan pada th atau td.
Formatnya:
<td colspan="2">Bogor, 11 January 2019<td>Contoh:
Buka kembali table.html di teks editor kesayangan Anda, lalu ubah scriptnya menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel Pada HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Tempat</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>1</td>
<td>Ananda Nisa</td>
<td colspan="2">Jakarta, 11 Desember 2010</td>
</tr>
<tr>
<td>2</td>
<td>Ahmad Khalis</td>
<td colspan="2">Aceh, 25 Maret 2016</td>
</tr>
<tr>
<td>3</td>
<td>Zailani</td>
<td>Laki-laki</td>
</tr>
</table>
</body>
</html>Hasil:
Menambah Atribut Rowspan Pada Table
Anda pun bisa membuat baris dalam table merentang (span) ke dalam beberapa baris.Perbedaannya dengan colspan adalah colspan itu merentangkan kolom, sementara rowspan merentangkan baris.
Contoh:
Buka kembali table.html di teks editor kesayangan Anda, lalu ubah scriptnya menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel Pada HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>Nama</th>
<td>Ananda Nisa</td>
</tr>
<tr>
<th rowspan="2">Telp</td>
<td>+628 87 1232 1789</td>
</tr>
<tr>
<td>+628 96 6722 3398</td>
</tr>
</table>
</body>
</html>Hasil:
***
Demikianlah tutorial cara membuat table pada HTML, semoga bemanfaat untuk Anda yang ingin mempelajari HTML.
Aamiin.
Kesimpulan:
Pada tutorial kali ini Anda sudah belajar dan menguasai pembuatan tabel, bagaimana menggunakan border, colspan dan rowspan.
Selamat!
Let's Coding!
Catatan:
Apabila Anda membutuhkan tutorial lainnya mengenai HTML, silahkan gunakan tombol menu pada situs ini atau dengan cara membuka sitemap pada situs ini.
Comments