Cara Membuat Tabel di HTML
Tabel tag HTML digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial latihan berikut kita akan membahas cara penggunaannya.
Untuk membuat tabel dengan HTML ada beberapa tag HTML yang harus diketahui. Pada dasarnya untuk membuat tabel cukup dengan menggunakan 3 elemen HTML berikut :
- Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
- Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
- Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabe
Selain itu, HTML juga menyediakan elemen-elemen pelengkap dalam pembuatan tabel seperti berikut :
- Elemen <th> digunakan untuk mendefinisikan header di dalam tabel
- Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel
- Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
- Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
<!DOCTYPE html> <html> <head> <title>Cara Menggunakan Tag Tabel</title> </head> <body> <h1>Belajar Membuat Tabel</h1> <table border="1"> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td>Baris 2, Kolom 3</td> </tr> <tr> <td> Baris 3, Kolom 1</td> <td> Baris 3, Kolom 2</td> <td> Baris 3, Kolom 3</td> </tr> <tr> <td> Baris 4, Kolom 1</td> <td> Baris 4, Kolom 2</td> <td> Baris 4, Kolom 3</td> </tr> </table> </body> </html>
Hasilnya:
ATTRIBUTE ROWSPAN DAN COLSPAN
Kedua Attribute ini sama-sama memiliki fungsi untuk menggabungkan beberapa bagian dari tabel.
- Attribute Rowspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertical.
- Attribute Colspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di sebelahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara horizontal.
Untuk mendapat gambaran fungsi dari kedua attribute ini, kopas code berikut pada Notepad++.
<!DOCTYPE html> <html> <head> <title>Belajar Mmbuat Tabel HTML</title> </head> <body> <h1>Atribut Rowspan</h1> <table border="1"> <tr> <td rowspan="2">Baris 1 Kolom 1 dan Baris 2 Kolom 1 </td> <td>Baris 1, Kolom 2</td> </tr> <tr> <td>Baris 2, Kolom 2</td> </tr> </table> <br/> <h1>Tabel dengan menggunakan colspan</h1> <table border="1"> <tr> <td colspan="2">Baris 1 Kolom 1 dan Kolom 2</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> </tr> </table> </body> </html>
Simpan dengan nama atributRowspan.html, lalu buka di browser, maka hasilnya adalah sebagai berikut :
Selamat mencoba.
1 Komentar
Cakep
BalasHapus