HTML Tables
Pada awal html dibuat, para web devoloper membuat sebuah layout(tata letak sebuah website) menggunakan table. Karena, pada saat itu belum ada yang namanya CSS. Pada saat ini table digunakan untuk membuat sebuah list data pada dashboard atau menampilkan data seperti word pada umumnya pada artikel.
Mari kita coba buat table sederhana di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Jenis kelamin</th>
</tr>
<tr>
<td>Ahmad</td>
<td>16 tahun</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>Aprio</td>
<td>14 tahun</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>Tiara</td>
<td>15 tahun</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Melda</td>
<td>16 tahun</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Ardi</td>
<td>15 tahun</td>
<td>Laki-laki</td>
</tr>
</table>
</body>
</html>
Table diatas menunjukan data nama, umur, dan jenis kelamin. Mari kita bahas masing-masing kode dan fungsinya.
table = untuk membuat sebuah table kita harus menuliskan kode table pembuka dan penutup, kemudian kita beri atribut border dan dengan value angka yang bisa dimulai dari angka 1.
tr = atau table row merupakan kode yang fungsinya untuk membuat sebuah baris baru pada sebuah table.
td = atau table data merupakan kode yang fungsinya untuk membuat sebuah data atau cells pada table.
th = atau table header merupakan kode yang fungsinya sama seperti td, namun disini fungsinya untuk membuat sebuah data yang mana posisinya sebagai keterangan pertama seperti contoh diatas adalah Nama, Umur, Jenis kelamin. Data yang dituliskan dengan th otomatis akan menjadi tebal dan rata tengah.
Setelah kalian pahami contoh diatas, silahkan kalian perhatikan contoh dibawah ini. Kali ini kita akan membuat sebuah table yang mana kita akan mengatur baris yang bisa digabungkan dengan baris lainnya menjadi satu baris. Dan juga data yang bisa digabungkan dengan data lainnya menjadi satu data.
<table border="1">
<tr>
<td rowspan="2">Baris Kosong</td>
<td>Baris samping pertama</td>
</tr>
<tr>
<td>Baris samping kedua</td>
</tr>
<tr>
<td colspan="2">Ini Baris Kosong</td>
</tr>
Mari kita bahasa mengenai atribut rowspan dan colspan.
rowspan = Memiliki fungsi untuk menggabungkan sebuah baris pada table (meggabungkan cells ke bawah).
colspan = Memiliki fungsi untuk menggabungkan sebuah cells pada table (menggabungkan cells ke samping).
Jika kita ingin membuat sebuah table yang mana ada data yang membutuhkan baris lebih satu atau cells lebih satu maka kita bisa menggunakan cara seperti contoh diatas.
Contoh terakhir mari kita kombinasikan dengan css dan juga gambar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Tables</title>
</head>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collapse: collapse;
}
table{
width: 30%;
}
th, td{
text-align:center;
}
</style>
<body>
<table>
<tr>
<td rowspan="2"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhvjxYTO1TfJvv00hnZDysdaGVX9qV25Q5Z0VM6MxWNhXp0tdnaVB4UbzRcwtPBCNIx2XWE32nFmynGKezvmkre1vOxYauaY0njjVS2-HtBNKSuwt-8Zc9nvYOCojcTM7DWlzkBcCQKQJHfULMT42Dopj2rk7J-GTfEj9utmwhmilfSEbgqqa2AYFv0=s300" width="250px" height="350px"> <br> <h4>Beli sekarang juga</h4></td>
<td colspan="4"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgDQbWU4ORmE9uz-F9NgXnwBR3o0u-E2OuGu3YFQAX9AexwtPQXQqCtzZaVvlidhQPk05RPO75qh34n08zvpNPyknMmkSF-ouGgNpFMTNo_palH2NyJ8l0kNyaFfpRimsEFQzACuR545aFQohmFDJ4ybdAggKMeaGarE3ckSOQIIMA8ak_jKZ2DDi8m=s2048" width="350px" height="100%"></td>
<td rowspan="2"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgwCUnw_gVPmHNgJzoQpz3wP-Ix58BMAmlxnZMUYIMkvg0WknqZUzvWAs9YVPw7RpEdcLBQNj6cLkgJNlVpfK1R-ePSi6yHo18UQB_0iDKWnN021Y8u6VK2AsmObmOti7An6nBJDMDeJE4DYpflkZAtGBQfj3kGFdLeoF0XQmcwqADzZPyEAzmS3Y-0=s275" width="250px" height="350px"> <br> <h4>Beli sekarang juga</h4></td>
</tr>
<tr>
<td><p>Ini Merupakan konten untuk membuat sebuah layout menggunakan table
kalian bisa mencobanya ini dengan mempelajari materi rowspan dan colspan terimakasih. Selamat mencoba
</p></td>
</tr>
<tr>
<td colspan="6">© copyright 2021 by Buku Pemrograman Dasar</td>
</tr>
</table>
</body>
</html>
Maka hasil semua contoh diatas seperti gambar dibawah ini
Untuk penjelasan css nya jika akan bahas pada seri materi css di buku digital ini. Terimakasih dan selamat mencoba