Membuat Tabel Dengan HTML
Masdita.com, Bagaimana cara membuat tabel dengan html? Di tutorial kali ini saya akan menjelaskan membuat tabel dengan html ya sob, menurut saya bisa membuat tabel sangat penting karena biasanya digunakan untuk menampilkan data dari database agar saat tampil d website terlihat rapi dan tidak acak acak an.
Tag untuk membuat tabel di html sebagai berikut,
- <table> digunakan untuk membuat tabel
- <thead> digunakan untuk bagian kepala tabel
- <tbody> digunakan untuk bagian body atau isi dari tabel
- <tr> digunakan untuk membuat baris
- <td> digunakan untuk membuat kolom
- <th> digunakan untuk membuat judul pada header tabel
Langsung saja ya sob, saya akan kasih contoh bagaimana membuat tabel dengan html
Buat file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat tabel dengan html</title>
</head>
<body>
<table>
<tr>
<td>Berada di baris 1 dan kolom 1</td>
<td>Berada di baris 1 dan kolom 2</td>
</tr>
<tr>
<td>Berada di baris 2 dan kolom 1</td>
<td>Berada di baris 2 dan kolom 2</td>
</tr>
<tr>
<td>Berada di baris 3 dan kolom 1</td>
<td>Berada di baris 3 dan kolom 2</td>
</tr>
</table>
</body>
</html>
Jika di jalankan, hasilnya seperti dibawah :
Loh kenapa tabel nya kok tidak ada garisnya? Seharusnya kalau di logika jika membuat tabel kan sudah ada garisnya ya? Nah disini jika kita menggunakan html, kita harus menambahkan atribut border=”1” di dalam tag <table> yang artinya ada garis dengan tebal 1 pixel.
Perbaiki file index.html yang sudah kita bikin tadi dengan menambahi atribut border=”1”, kodenya seperti di bawah ini ya sob
<!DOCTYPE html>
<html>
<head>
<title>Membuat tabel dengan html</title>
</head>
<body>
<table border="1">
<tr>
<td>Berada di baris 1 dan kolom 1</td>
<td>Berada di baris 1 dan kolom 2</td>
</tr>
<tr>
<td>Berada di baris 2 dan kolom 1</td>
<td>Berada di baris 2 dan kolom 2</td>
</tr>
<tr>
<td>Berada di baris 3 dan kolom 1</td>
<td>Berada di baris 3 dan kolom 2</td>
</tr>
</table>
</body>
</html>
Ketika dijalankan kembali seperti di bawah ini hasilnya :
Membuat warna pada tabel
Menambahkan warna pada kolom dan baris bisa menggunakan atribut bgcolor, untuk lebih jelasnya sobat bisa lihat contoh nya di bawah ini:<!DOCTYPE html>
<html>
<head>
<title>Membuat tabel dengan html</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="red">Berada di baris 1 dan kolom 1</td>
<td>Berada di baris 1 dan kolom 2</td>
</tr>
<tr>
<td>Berada di baris 2 dan kolom 1</td>
<td>Berada di baris 2 dan kolom 2</td>
</tr>
<tr bgcolor="yellow">
<td>Berada di baris 3 dan kolom 1</td>
<td>Berada di baris 3 dan kolom 2</td>
</tr>
</table>
</body>
</html>
Hasil ketika dijalankan kembali dengan penambahan atribut bgcolor :
Menggabungkan kolom atau baris tabel
Atribut untuk menggabungkan pada kolom atau baris tabel menggunakan rowspan dan colspan:- Colspna digunakan sebagai menggabungkan kolom
- Rowspan digunakan sebagai menggabungkan baris
Kita lihat contoh kode dibawah ya sob:
<!DOCTYPE html>
<html>
<head>
<title>Membuat tabel dengan html</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="red" colspan="2">Berada di baris 1 dan kolom 1,2</td>
</tr>
<tr>
<td>Berada di baris 2 dan kolom 1</td>
<td rowspan="2">Berada di baris 2,3 dan kolom 2,3</td>
</tr>
<tr bgcolor="yellow">
<td>Berada di baris 3 dan kolom 1</td>
</tr>
</table>
</body>
</html>
Jika dijalankan hasilnya akan seperti di bawah ini:
Nah itulah tutorial dalam membuat tabel dengan html, menurut saya untuk bagian rowspan dan colspan membutuhkan logika yang lumayan sulit, karena kita harus cermat kolom atau baris mana saja yang ingin dibagikan. Terus kunjungi masdita.com ya untuk mendapatkan kabar terbaru tentang pemrogro tips dan trik lainya.
Belum ada Komentar untuk "Membuat Tabel Dengan HTML"
Posting Komentar