Cara Membuat Tabel Pada HTML Lengkap dan Mudah
Posted by Astarwan guntur gunawan
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.
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.
<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.
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 tabelpada 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.
Tambahkan komentar