Halo sobat Artikel Multimedia, apa kabar hari ini, semoga sehat selalu. Di postingan ini kita akan belajar membuat tabel sederhana menggunakan html. Selain tag tabel terdapat pula tag html lainnya dan beberapa css pendukung yang akan digunakan dalam membuat tabel tersebut. Jika sobat masih bingung dengan apa itu tag dalam html, sobat bisa baca kembali di postingan sebelumnya pengenalan dasar tag html.
Bentuk tabel yang akan dibuat:
Kode html untuk membuat tabel:
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tabel Sederhana</title>
</head>
<table border="" rules="all">
<caption>
<h2>Daftar Harga Barang Toko Komputer</h2>
</caption>
<tr style="height: 50px; background-color: aquamarine">
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Jumlah Barang</th>
<th>Harga Barang</th>
<th>Total Harga</th>
</tr>
<tr>
<td>L01AS</td>
<td>Laptop Asus</td>
<td style="text-align: center">2</td>
<td>Rp 5.000.000</td>
<td>Rp 10.000.000</td>
</tr>
<tr>
<td>L01LV</td>
<td>Laptop Lenovo</td>
<td style="text-align: center">2</td>
<td>Rp 6.000.000</td>
<td>Rp 12.000.000</td>
</tr>
<tr>
<td>L01HP</td>
<td>Laptop HP</td>
<td style="text-align: center">1</td>
<td>Rp 5.000.000</td>
<td>Rp 5.000.000</td>
</tr>
<tr>
<td>K01LC</td>
<td>Keyboard Logitech</td>
<td style="text-align: center">5</td>
<td>Rp 100.000</td>
<td>Rp 500.000</td>
</tr>
<tr>
<td>M01RT</td>
<td>Mouse Robot</td>
<td style="text-align: center">10</td>
<td>Rp 40.000</td>
<td>Rp 400.000</td>
</tr>
<tr>
<td colspan="2">Jumlah Barang</td>
<td style="text-align: center"><b>20</b></td>
<td>Total Harga</td>
<td><b>Rp 27.900.000</b></td>
</tr>
</table>
</body>
Berikut penjelasan mengenai fungsi
dari masing-masing tag html yang digunakan untuk membuat tabel.
<th></th> : data atau kolom di tabel (Tebal)
<tr></tr> : row atau baris di tabel
<td></td> : data atau kolom di tabel
<caption> : Membuat judul tabel
Border="" : Membuat garis pada tabel
colspan : Menggabungkan kolom di dalam tabel
rowspan: Menggabungkan baris di dalam tabel
width : Menentukan lebar kolom di dalam tabel
height : Menentukan tinggi baris di dalam tabel
Sekian penjelasan mengenai cara
membuat tabel dengan html, jika sobat tertarik dengan topik bacaan seputar multimedia
silakan kunjungi postingan kami lainnya di blog ini. Terima kasih …
0 Komentar
Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda