Cara membuat tabel di HTML adalah bahasan kita kali ini dalam sesi belajar HTML untuk pemula. Bagaimana cara membuatnya? Simak pembahasan selengkapnya di postingan kali ini.
Di postingan sebelumnya kita sudah membahas cara memasukkan gambar di HTML. Silakan dicek jika Anda belum melihatnya. Baik, mari kita masuk ke pembahasan bagaimana cara membuat tabel di HTML.
Tabel dibutuhkan untuk menampilan data dalam bentuk terstruktur dan tertata rapi sehingga informasinya dapat lebih mudah ditangkap. Di HTML juga tersedia tag/coding untuk membuat tabel.
Membuat tabel di HTML
Ada 3 tag yang digunakan untuk membuat tabel di HTML. yakni: tag <table>, tag <tr>, dan tag <td>.
- <table> : sebagai tag pembuka pembuatan tabel
- <tr> : sebagai pembuat baris tabel, singkatan dari table row
- <td> : sebagai pembuat kolom tabel, singkatan dari table data
Jadi struktur membuat tabel di HTML (satu baris dan kolom) seperti ini:
<table>
<tr>
<td>Kolom 1 Baris 1</td>
</tr>
</table>
Baris pertama tabel ditandai dengan tag <tr>. Untuk menambahkan baris selanjutnya, tinggal dicopy saja dan paste tepat di bawahanya. 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? Memang secara bawaan, tag table menciptakan tabel namun tanpa garis tepinya. Untuk memunculkan garis tepi di tabel tersebut ada caranya.
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>
Simpan perubahan file tersebut kemudian buka web browser kembali lalu refresh halamannya. Baru deh ada garis tepinya seperti gambar berikut.
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 dengan mengikuti coding di atas. Sebaiknya juga jangan copy-paste supaya lebih terasa feel codingnya dan merasakan bagaimana rasanya menjadi seorang programmer.
Demikian pembahasan kita kali ini tentang cara membuat tabel di HTML. Semoga panduan di atas bisa membantu Anda.
Selanjutnya, kita akan bahas bagaimana cara membuat komentar di HTML.
