Menyajikan Pembuatan Tabel Pada HTML Menggunakan Web
Daftar Isi [Tampilkan]
Menyajikan Pembuatan Tabel Pada HTML Menggunakan Web Pada artikel kali ini akan dibahas tentang bagaimana cara membuat tabel pada html. Tabel adalah sekumpulan data yang disusun berdasarkan baris dan kolom. Dalam sebuah website, tabel digunakan untuk menampilkan sebuah basis data atau data base.
Dulu sebelum CSS berkembang, tabel digunakan untuk mendesain tampilan web. Seiring makin populernya CSS, maka dalam mendesain tampilan web tidak lagi menggunakan tabel karena dianggap terlalu lambat.
Nah Menyajikan Pembuatan Tabel Pada HTML Menggunakan Web, bagaimana cara membuat tabel di HTML, berikut penjelasannya.
Dalam HTML, untuk membuat sebuah tabel digunakan 3 tag yaitu <table>, <tr> dan <td>
a. Tag <table> digunakan untuk memulai membuat table, dan tag ini ditutup dengan </table>
b. Tag <tr> yang merupakan kepanjangan dari table row, fungsi dari tag ini untuk membuat baris dalam tabel. Tag ini ditutup dengan </tr>
C. Tag <td> merupakan kepanjangan dari table row, berfungsi untuk menampilkan data dalam tabel yang membentuk kolom-kolom, tag ini ditutup dengan <td>.
Berikut adalah contoh membuat tabel 2 baris 2 kolom dengan menggunakan tag <table>,<tr> dan <td>.
Silahkan Anda simak dan praktekan di komputer.
<html>
<head>
<title>contoh tabel 1</title>
</head>
<body>
<h1>Contoh Tabel</h1>
<table border="1">
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</table>
<head>
<title>contoh tabel 1</title>
</head>
<body>
<h1>Contoh Tabel</h1>
<table border="1">
<tr><td>Ini baris 1, kolom 1</td>
<td>Ini baris 1, kolom 2</td>
</tr>
<tr><td>Ini baris 2, kolom 1</td>
<td>Ini baris 2, kolom 2</td>
</tr>
</table>
</body>
</table>
Simpan kode html diatas, kemudian buka di browser maka tampilannya nampak seperti berikut.
Coba Anda perhatikan, pada tag <table> disisipkan atribut border. Atribut border digunakan untuk memberikan ketebalan pada garis tepi tabel. Dalam kode HTML diatas tertulis <table border="1">, berarti garis tepi tabel bernila 1pixel. Secara default jika tanpa disisipkan atribut border pada tag <table> maka border tersebut bernilai 0.
Agar lebih paham mengenai cara membuat tabel pada HTML, silahkan Anda coba latihan kembali dengan menulis tag HTML membuat tabel 4 baris 3 kolom.
<html>
<head>
<title>Contoh Tabel 2</title>
</head>
<body>
<h1>Contoh Tabel 4 Baris 3 Kolom</h1>
<table border="1">
<tr><td>Ini Baris 1, Kolom 1</td>
<td>Ini Baris 1, Kolom 2</td>
<td>Ini Baris 1, Kolom 3</td>
</tr>
<tr><td>Ini Baris 2, Kolom 1</td>
<td>Ini Baris 2, Kolom 2</td>
<td>Ini Baris 2, Kolom 3</td>
</tr>
<tr><td>Ini Baris 3, Kolom 1</td>
<td>Ini Baris 3, Kolom 2</td>
<td>Ini Baris 3, Kolom 3</td>
</tr>
<tr><td>Ini Baris 4, Kolom 1</td>
<td>Ini Baris 4, Kolom 2</td>
<td>Ini Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
<head>
<title>Contoh Tabel 2</title>
</head>
<body>
<h1>Contoh Tabel 4 Baris 3 Kolom</h1>
<table border="1">
<tr><td>Ini Baris 1, Kolom 1</td>
<td>Ini Baris 1, Kolom 2</td>
<td>Ini Baris 1, Kolom 3</td>
</tr>
<tr><td>Ini Baris 2, Kolom 1</td>
<td>Ini Baris 2, Kolom 2</td>
<td>Ini Baris 2, Kolom 3</td>
</tr>
<tr><td>Ini Baris 3, Kolom 1</td>
<td>Ini Baris 3, Kolom 2</td>
<td>Ini Baris 3, Kolom 3</td>
</tr>
<tr><td>Ini Baris 4, Kolom 1</td>
<td>Ini Baris 4, Kolom 2</td>
<td>Ini Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Simpan kode HTML diatas, kemudian Anda buka di browser maka akan tampil seperti berikut.
Bagaimana, apakah sudah paham dengan penjelasan diatas atau tambah bingung :d. Baiklah agar lebih paham tentang cara membuat tabel di HTML, berikut Saya akan buat tabel yang berisi data tentang biodata diri. Silakan Anda coba dan praktekan kode HTML berikut :
<html>
<head>
<title>Contoh Tabel 3</title>
</head>
<body>
<center><h1>Bodata Diri</h1></center>
<center><table border="0">
<tr><td>Nama</td>
<td>:</td>
<td>Jeki</td>
</tr>
<tr><td>Jenis Kelamin</td>
<td>:</td>
<td>Laki-laki</td>
</tr>
<tr><td>Umur</td>
<td>:</td>
<td>23 tahun</td>
</tr>
<tr><td>E-Mail</td>
<td>:</td>
<td>Jeki-xxx@gmail.com</td>
</tr>
</table>
</center>
</body>
</html>
<head>
<title>Contoh Tabel 3</title>
</head>
<body>
<center><h1>Bodata Diri</h1></center>
<center><table border="0">
<tr><td>Nama</td>
<td>:</td>
<td>Jeki</td>
</tr>
<tr><td>Jenis Kelamin</td>
<td>:</td>
<td>Laki-laki</td>
</tr>
<tr><td>Umur</td>
<td>:</td>
<td>23 tahun</td>
</tr>
<tr><td>E-Mail</td>
<td>:</td>
<td>Jeki-xxx@gmail.com</td>
</tr>
</table>
</center>
</body>
</html>
Simpan kode HTML diatas, kemudian Anda buka di browser maka akan tampil seperti berikut.
Jika Anda perhatikan tampilan tabel di browser maka garis tepi tabel tidak muncul, hal ini dikarenakan nilai dari atribut border bernilai "0" dan tabel tersebut tampil di posisi tengah halaman. Fungsi dari tabel pada HTML selain untuk mengisi data, juga berfungsi untuk merapihkan data-data agar tampilan terlihat rapih tidak acak-acakan.
