Cara Membuat Tabel di HTML
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel terdiri dari 4 unsur utama:
- Baris
- Kolom
- Sel
- Garis
Lalu, bagaimana cara membuat tabel di HTML?
Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.
Tag untuk Membuat Tabel di HTML
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
- Tag untuk membungkus tabelnya
- Tag
- untuk membungkus bagian kepala tabel
- Tag
- untuk membungkus bagian body dari tabel
- Tag
- (tabel row) untuk membuat baris
- Tag
(table data) untuk membuat sel - Tag
(table head) untuk membuat judul pada header Tag yang paling penting untuk diingat adalah tag , , dan . Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Mari kita lihat contohnya:
<html>
<head>
<title>Belajar Membuat Tabel HTMLtitle>
head>
<body>
<table>
<tr>
<td>Baris 1 kolom 1td>
<td>baris 1 kolom 2td>
tr>
<tr>
<td>Baris 2 kolom 1td>
<td>baris 2 kolom 2td>
tr>
table>
body>
html>
Hasilnya:
Kok tidak ada garisnya?
Iya, karena kita tidak menambahkan atribut border pada tabelnya.
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag .
Sehingga akan menjadi seperti ini:
<table boder="1">
<tr>
<td>Baris 1 kolom 1td>
<td>baris 1 kolom 2td>
tr>
<tr>
<td>Baris 2 kolom 1td>
<td>baris 2 kolom 2td>
tr>
table>
Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.
Nilai "1" adalah ukuran garis yang palng kecil.
Hasilnya akan sepert ini:
Mengatur Jarak Sel dengan Cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.
Atribut ini dapat kita berikan kepada tag.
Contoh:
<table border="1" cellpadding="10">
<tr>
<td>Baris 1 kolom 1td>
<td>baris 1 kolom 2td>
tr>
<tr>
<td>Baris 2 kolom 1td>
<td>baris 2 kolom 2td>
tr>
table>
Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis.
Maka hasilnya:
Menambahkan Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag (untuk baris).
Contoh:
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1 kolom 1td>
<td>baris 1 kolom 2td>
tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1td>
<td>baris 2 kolom 2td>
tr>
table>
Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.
Maka hasilnya akan seperti ini:
Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:- rowspan untuk menggbungkan baris;
- colspan untuk mebggabungkan kolom.
(untuk sel) atau atau . 
Mari kita lihat contohnya:
<html>
<head>
<title>Belajar Membuat Tabel HTMLtitle>
head>
<body>
<table border="1">
<tr>
<th rowspan="2" bgcolor="yellow">Bulanth>
<th colspan="2" bgcolor="#00ff80">Hasil Panenth>
tr>
<tr>
<th>Padith>
<th>Kacangth>
tr>
<tr>
<td>Januaritd>
<td>500 Kgtd>
<td>231 Kgtd>
tr>
<tr>
<td>Februaritd>
<td>342 Kgtd>
<td>423 Kgtd>
tr>
<tr>
<td>Marettd>
<td>432 Kgtd>
<td>124 Kgtd>
tr>
<tr>
<td>Apriltd>
<td>453 Kgtd>
<td>523 Kgtd>
tr>
table>
body>
html>
Hasilnya:
Menyisipkan Elemen yang Lain ke dalam Sel
Di salam seldan , kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.
Contoh:
<html>
<head>
<title>Belajar Membuat Tabel HTMLtitle>
head>
<body>
<table border="1">
<tr>
<th colspan="3" bgcolor="yellow">Produk Unggulanth>
tr>
<tr>
<td rowspan="4">
<img src="https://www.petanikode.com/img/bibit.png" width="200" />
td>
tr>
<tr>
<td>Namatd>
<td>Benih Kodetd>
tr>
<tr>
<td>Hargatd>
<td>Rp 192.000td>
tr>
<tr>
<td>Fiturtd>
<td>
<ul>
<li>Dilengkapi Dokumentasili>
<li>Ukuran: 31MBli>
<li>Masa Tanam: 6 Bulanli>
<li>Lisensi: MITli>
ul>
td>
tr>
table>
body>
html>
Hasilnya:
Apa Selanjutnya?
Bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel. Karena kita harus teliti, berapa ukuran sel yang akan digabungkan dengan rowspan dan colspan.
Saran:
Sering-sering latihan dengan contoh kasus tertentu. Coba lihat tabel-tabel yang ada di skeliling kita, lalu coba buat tabel tersebut dalam HTML.
Tidak ada komentar:
Posting Komentar