Membuat tabel di HTML
Ada 3 tag yang digunakan untuk membuat tabel di HTML. yakni: tag <table>, <tr>, dan <td>.
<table> : sebagai tag pembuka membuat tabel
<tr> : sebagai pembuat baris di tabel, singkatan dari table row
<td> : sebagai pembuat kolom data di tabel, singkatan dari table data
Jadi struktur membuat tabel di HTML seperti ini:
<table> <tr> <td>Kolom 1 Baris 1</td> </tr> </table>
Langsung kita coba buat tabel 2 baris dengan masing-masing baris ada 2 kolom data.
<!DOCTYPE html> <html> <head> <title>Membuat tabel di HTML</title> </head> <body> <h1>Tabel 2 x 2</h1> <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>
Simpan dengan nama tabel.html.. jadinya seperti ini.
Loh, kok nggak ada garis tepinya?
Supaya ada garis tepinya, kita tambahkan atribut border pada tag <table>. Nilai dari atribut border ini berukuran dalam satuan pixel.
Coba kita tambahkan border="1".
<!DOCTYPE html> <html> <head> <title>Membuat tabel di HTML</title> </head> <body> <h1>Tabel 2 x 2</h1> <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> </body> </html>
Baru deh ada garis tepinya.
Barangkali Anda tertarik baca:
- Tutorial HTML untuk Pemula: Menambahkan Komentar di HTML
- Tutorial HTML untuk Pemula: Membuat Form di HTML
- Tutorial HTML Lanjutan: Perbedaan Tag Div dan Span
Kalo mau tambah kolom datanya gimana?
Tinggal tambah ini:
<td>baris 1 kolom 3</td>
dan ini:
<td>baris 2 kolom 3</td>
di masing-masing <tr></tr>.
Jadinya seperti ini:
<!DOCTYPE html> <html> <head> <title>Membuat tabel di HTML</title> </head> <body> <h1>Tabel 2 x 2</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> </table> </body> </html>
Di browsernya akan tampil:
Kalo mau tambah barisnya?
Tinggal tambah ini:
<tr> <td>baris 3 kolom 1</td> <td>baris 3 kolom 2</td> <td>baris 3 kolom 3</td> </tr>
Jadi kode akhirnya:
<!DOCTYPE html> <html> <head> <title>Membuat tabel di HTML</title> </head> <body> <h1>Tabel 2 x 2</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> </table> </body> </html>
Akan seperti ini jadinya:
Gimana? nggak susah kan? lebih enak sekalian praktik.
Okay, selesai pembahasan kita tentang membuat tabel di HTML.
Selanjutnya kita akan membahas cara menambahkan komentar di HTML.