Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel. Tabel terdiri dari 4 unsur utama:
- Baris
- Kolom
- Sel
- Garis
Tag untuk Membuat Tabel di HTML
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
Tag <table> untuk membungkus tabelnyaTag <thead> untuk membungkus bagian kepala tabelTag <tbody> untuk membungkus bagian body dari tabelTag <tr> (tabel row) untuk membuat barisTag <td> (table data) untuk membuat selTag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML#9</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>
Hasilnya :
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.Maka akan jadi seperti 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>
Hasilnya :
Mengatur Jarak Sel dengan Cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.
Contoh :
<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 :
Menambahkan Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Contoh :
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Hasilnya :
Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:
- rowspan untuk menggbungkan baris;
- colspan untuk mebggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td> atau <th>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML#9</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
</tr>
<tr>
<th>Padi</th>
<th>Kacang</th>
</tr>
<tr>
<td>Januari</td>
<td>500 Kg</td>
<td>231 Kg</td>
</tr>
<tr>
<td>Februari</td>
<td>342 Kg</td>
<td>423 Kg</td>
</tr>
<tr>
<td>Maret</td>
<td>432 Kg</td>
<td>124 Kg</td>
</tr>
<tr>
<td>April</td>
<td>453 Kg</td>
<td>523 Kg</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Menyisipkan Elemen yang Lain ke dalam Sel
Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML#9</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3" bgcolor="yellow">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://i.ibb.co/khnj0F7/sawit.png" width="200" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>Bibit Sawit</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 250.000</td>
</tr>
<tr>
<td>Keunggulan</td>
<td>
<ul>
<li>Produktivitas 40 ton/ha/tahun</li>
<li>CPO 10 ton/ha/tahun</li>
<li>Pertumbuhan 65 cm/tahun</li>
<li>160 pohon/ha</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hasilnya :
0 komentar:
Posting Komentar