Menyajikan Pembuatan Tabel Pada HTML. 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, 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.
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, 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.
Demikianlah artikel singkat tentang Cara Membuat Tabel Pada HTML. Pada artikel selanjutnya Saya akan membahas tentang Cara Menggbungkan Sel Tabel Pada HTML.
Jika artikel ini bermanfaat silahkan Anda share melalui tombol share. Terima kasih :)
tadinya saya bingung bagaimana cara membuat macam-macam tabel dengan kode html
ReplyDeletetapi setelah berkunjung ke blog ini, saya jadi sedikit faham
Terima kasih atas kunjungannya, smoga cpt paham mba
Deletegambar dari hasilnya kok belum muncul ya?
ReplyDeleteGambar yg mana gan?
DeleteCara membuat Kolom di web bagaimana caranya ?
ReplyDeleteni dia nih yg ane cari, thanks tutorial tablenya gan
ReplyDeleteMy blog
Thanks ilmunya sangat bermanfaat
ReplyDeleteTerimakasih, ilmunya sangat bermanfaat
ReplyDeleteTerimakasih ilmunya sangat bermanfaat
ReplyDeleteTerimakasih Bos Artikelnya
ReplyDeleteTerimakasih Bos Artikelnya
ReplyDelete